模态框

实例

模态框允许已对话框的形式弹出,有半透明的页面遮罩层,并在显示和隐藏时支持动画。

静态实例

<div class="modal fade">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">关闭</span></button>
        <h4 class="modal-title">标题</h4>
      </div>
      <div class="modal-body">
        <p>主题内容...</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary">保存</button>
      </div>
    </div>
  </div>
</div>

动态实例

点击按钮通过Javascript来启动一个模态框。

<!-- 模态框触发按钮 -->
<button type="button" class="btn btn-lg btn-primary" data-toggle="modal" data-target="#myModal">启动模态框</button>

<!-- 模态框HTML -->
<div class="modal fade" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

决定模态框位置

默认情况下模态框会根据自身内容高度展示在页面中心稍靠上方的位置。通过一些参数可以重新决定模态框的展现位置(具体参数参考“如何使用”章节)。

<button type="button" class="btn" data-position="fit" data-toggle="modal" data-target="#myModal">默认位置</button>
<button type="button" class="btn" data-position="center" data-toggle="modal" data-target="#myModal">窗口中间</button>
<button type="button" class="btn" data-position="" data-toggle="modal" data-target="#myModal">靠近上方</button>
<button type="button" class="btn" data-position="100px" data-toggle="modal" data-target="#myModal">距离上方100px</button>

更改模态框的大小

模态框的默认宽度为600px,你可以通过为.modal-dialog应用CSS样式来更改模态框的宽度。在ZUI中也提供了额外两种预设的宽度,通过为.modal-dialog添加CSS类名来调整实现:

<!-- 大模态框 -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myLgModal">大模态框</button>

<div class="modal fade" id="myLgModal">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

<!-- 小模态框 -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#mySmModal">小模态框</button>

<div class="modal fade" id="mySmModal">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

禁用动画效果

模态框在弹出或隐藏时会伴随动画效果(淡入淡出效果),如果不需要,只需要移除.modal标签上的.fade类即可。

<!-- 禁用动画效果的模态框 -->
<div class="modal">
...
</div>

关闭模态框

在静态模态框HTML中增加一个按钮并添加data属性data-dismiss="modal",这样当点击该按钮时会关闭此对话框。你可以将该属性添加至模态框内的任何元素。

<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">关闭</span></button>

如何使用

使用data属性

一般情况下不需要手动调用Javascript来使用模态框,只需要在触发模态框的按钮或链接上增加两个额外的data属性即可:data-toggle="modal"data-target="#myModal"

其中data-toggle属性声明该按钮或链接点击后会显示或隐藏模态框。data-target属性指明静态模态框的ID属性。

如果使用<a>触发模态框,可以直接将静态模块框的ID写在href属性内,data-target属性则可以忽略。

使用data属性也可以来为对话框提供其他参数。

<!-- 使用按钮 -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">启动模态框</button>

<!-- 使用超链接 -->
<a data-toggle="modal" href="#myModal">启动模态框</a>

手动调用Javascript

不使用按钮或链接来触发模态框也可以使用Javascript来手动触发。

$('#myModal').modal(options)

参数

参数既可以在手动调用的时候指定,也可以在静态模态框或者触发器上使用data属性来指定。

可用的参数如下:

参数 名称 可选值 说明
backdrop 背景遮罩
  • 'static'
  • true(默认)
  • false
使用布尔值来启用或禁用背景遮罩,如果指定为'static'则会启动背景遮罩,但点击背景遮罩时不会触发关闭模态框的过程。
keyboard 按键
  • true(默认)
  • false
当为ture时,按下esc键会关闭模态框。
show 立即显示
  • true(默认)
  • false
是否在模态框初始化之后立即显示出来。
position 显示位置
  • 'fit'(默认),最佳位置;
  • 'center',显示在窗口中间;
  • '',显示在最顶部;
  • 200,数字用来指定距离顶部的像素;
  • CSS支持的所有表示位置的值,用来指定距离顶部的偏移;
默认位置是在窗口中部稍偏上的地方。

方法

.modal(options)

使用参数对象来初始化模态框。

$('#myModal').modal(
{
    keyboard : false,
    show     : true
})
.modal('toggle', position)

手动显示或隐藏模态框。position参数为可选的,用来指定显示的位置。

$('#myModal').modal('toggle', 'center')
.modal('show', position)

手动显示模态框。position参数为可选的,用来指定显示的位置。

$('#myModal').modal('show', 'fit')
.modal('hide', position)

手动隐藏模态框。position参数为可选的,用来指定显示的位置。

$('#myModal').modal('hide', 'fit')
.modal('ajustPosition', position)

手动重新调整模态框显示位置。position参数为可选的,用来指定显示的位置。

$('#myModal').modal('ajustPosition', 'fit')

事件

模态框提供了一系列事件用于监听模态框运行状态,便于在合适的时机运行你自己的代码。

事件 描述
show.zui.modal show方法被调用时,此事件将被立即触发。
shown.zui.modal 当模态对话框呈现到用户面前时(会等待过渡效果执行结束)此事件被触发。
hide.zui.modal hide方法被调用时,此事件将被立即触发。
hidden.zui.modal 当模态对话框被隐藏(而且过渡效果执行完毕)之后,此事件将被触发。
escaping.zui.modal 当用户按下esc键来关闭对话框之前会调用此方法,如果在事件回调函数中返回false,则会终止对话框关闭过程。

监听事件使用jQuery的on方法:

$('#myModal').on('shown.zui.modal', function()
{
  alert('对话框已显示。');
})

使用要点

类型

基本类型

启动方式一:通过在一个起控制器作用的页面元素(例如,按钮)上设置data-toggle="modal",并使用data-target="#foo"或href="#foo"指向特定的模态框即可。

启动方式二:只需一行JavaScript代码,即可通过id myModal调用模态框: $('#myModal').modal(options)

框架对话框触发器

打开框架对话框
打开ajax对话框 打开全屏的ajax对话框 跨域远程内容

变化

选项

aria-labelledby="myModalTitle"属性指向模态框标题。

aria-hidden="true"告诉辅助性工具略过模态框的DOM元素。

aria-describedby='myModelBody'属性用以指向描述信息。

通过对div.modal增加data-*选项来改变模态对话框。或通过js改变$('#myModal').modal({ keyboard: false })

名称 类型 默认值 描述
backdrop boolean/static true

true时,添加一个背景元素,且点击外部区域将其关闭。

false时,不会添加背景元素,且点击外部区域不会关闭。

static时,添加一个背景元素,且点击外部区域不会关闭。

keyboard boolean true

true时,按esc键关闭模态框。

false时,按esc不会关闭模态框。

show boolean true

true时,初始化时即显示模态对话框。

true时,初始化时不显示模态对话框。

remote path false

如果提供了远程url地址,就会通过 jQuery的load方法加载内容并注入到.modal-body中。如果你使用的是data属性api,你还可以使用href标签指定远程数据源。

方法和事件

方法 例子 描述
.modal(options) $('#myModal').modal({ keyboard: false }) 让你指定的内容变成一个模态对话框。接受一个可选的参数object.
.modal('toggle') $('#myModal').modal('toggle') 手动打开或隐藏一个模态对话框。
.modal('show') $('#myModal').modal('show') 手动打开一个模态对话框。
.modal('hide') $('#myModal').modal('hide') 手动隐藏一个模态对话框。

改变模态框大小

通过重新定义.modal-dialog宽度.modal-dialog {width:*}来改变模态框大小

载入效果

目前有div.modal.fade和div.modal.in效果,需要transition.js支持。

载入远程内容