对话框允许以对话框的形式弹出,有半透明的页面遮罩层,并在显示和隐藏时支持动画。
对话框允许以对话框的形式弹出,有半透明的页面遮罩层,并在显示和隐藏时支持动画。
<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="0" 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类名来调整实现:
.modal-lg
CSS类名,宽度为900px
;.modal-sm
CSS类名,宽度为300px
;.modal-fullscreen
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>
开启此选项可以允许用户在对话框显示之后通过拖拽头部移动对话框。
要启用此功能需要手动设置moveable
参数值为true
,或者为.modal-dialog
增加一个class.modal-moveable
。
<button type="button" class="btn" data-moveable="true" data-toggle="modal" data-target="#myModal">默认位置</button>
通过设置rememberPos
为true
来记住对话框移动之后的位置。rememberPos
可取的值如下:
false
(默认),不记住位置;true
,记住位置,但关闭页面或浏览器之后会复位;对话框在弹出或隐藏时会伴随动画效果(淡入淡出效果),如果不需要,只需要移除.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>
一般情况下不需要手动调用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来手动触发。
$('#myModal').modal(options)
参数既可以在手动调用的时候指定,也可以在静态对话框或者触发器上使用data属性来指定。
可用的参数如下:
参数 | 名称 | 可选值 | 说明 |
---|---|---|---|
name |
对话框名称 | 字符串,默认为'triggerModal' |
此参数会指定对话框DOM的id属性和iframe的id属性和name属性。 |
backdrop |
背景遮罩 |
|
使用布尔值来启用或禁用背景遮罩,如果指定为'static' 则会启动背景遮罩,但点击背景遮罩时不会触发关闭对话框的过程。 |
keyboard |
按键 |
|
当为ture 时,按下esc 键会关闭对话框。 |
show |
立即显示 |
|
是否在对话框初始化之后立即显示出来。 |
position |
显示位置 |
|
默认位置是在窗口中部稍偏上的地方。 |
moveable |
可移动的 |
|
是否启用对话框拖拽移动功能 |
rememberPos |
记住移动的位置 |
|
当该值为一个在页面范围内值唯一的字符串时,通过浏览器本地存储来存储数据,关闭页面或浏览器之后也不会忘记。 |
使用参数对象来初始化对话框。
$('#myModal').modal({
keyboard : false,
show : true
})
手动显示或隐藏对话框。position
参数为可选的,用来指定显示的位置。
$('#myModal').modal('toggle', 'center')
手动显示对话框。position
参数为可选的,用来指定显示的位置。
$('#myModal').modal('show', 'fit')
手动隐藏对话框。position
参数为可选的,用来指定显示的位置。
$('#myModal').modal('hide', 'fit')
手动重新调整对话框显示位置。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('对话框已显示。');
})