一,基本使用
下面几点注意:
1,不支持同时打开多个模态框
千万不要在一个模态框上重叠另一个模态框。要想同时支持多个模态框,需要自己写额外的代码来实现。
2,模态框的 HTML 代码放置的位置
务必将模态框的 HTML 代码放在文档的最高层级内(也就是说,尽量作为 body 标签的直接子元素),以避免其他组件影响模态框的展现和/或功能。
3,Due to how HTML5 defines its semantics, the autofocus
HTML attribute has no effect in Bootstrap modals. To achieve the same effect, use some custom JavaScript:
由于H5语义化定义,autofocus属性在模态框中无效,除非手动写js代码如下:
$('#myModal').on('shown.bs.modal', function () {
$('#myInput').focus()
})
'shown.bs.modal'是一个事件,解释如下,大意是当模态框加载完后执行里面的代码。
shown.bs.modal | 此事件在模态框已经显示出来(并且同时在 CSS 过渡效果完成)之后被触发。如果是通过点击某个作为触发器的元素,则此元素可以通过事件的 relatedTarget 属性进行访问。 |
下面是一个动态模态框的demo:点击按钮即可通过 JavaScript 启动一个模态框。此模态框将从上到下、逐渐浮现到页面前。
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
点击唤出模态框
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">标题</h4>
</div>
<div class="modal-body">
<p>我是body部分</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>
务必为 .modal
添加 role="dialog"
和 aria-labelledby="..."
属性,用于指向模态框的标题栏;为 .modal-dialog
添加 aria-hidden="true"
属性。
另外,你还应该通过 aria-describedby
属性为模态框 .modal
添加描述性信息。
1,如果需要更改模态框的大小(页面上显示的宽度)
在.modal-dialog类的div上增加class:modal-lg大模态框,modal-sm小模态框;
2,如果不想使用模态框加载时候的淡入淡出效果,去掉最外层div的fade类即可。
3,模态框分标题modal-header,主体modal-body,和尾部modal-footer三个部分。在主体部分可以用栅格系统。
二、多个按钮触发同一个模态框
Varying modal content based on trigger button
Have a bunch of buttons that all trigger the same modal, just with slightly different contents? Use event.relatedTarget
and HTML data-*
attributes (possibly via jQuery) to vary the contents of the modal depending on which button was clicked. See the Modal Events docs for details on relatedTarget
,
<button type="button" class="btn btn-primary" data-toggle="modal"
data-target="#exampleModal" data-whatever="@mdo">按钮一</button>
<button type="button" class="btn btn-primary" data-toggle="modal"
data-target="#exampleModal" data-whatever="@fat">按钮二</button>
<button type="button" class="btn btn-primary" data-toggle="modal"
data-target="#exampleModal" data-whatever="@getbootstrap">按钮三</button>
可以使用多个按钮来触发同一个模态框,可能模态框里面的内容只有一点点的不一样,如果每次都重写的话会浪费html代码。
通过 event.relatedTarget,html的data-*属性来验证是哪个按钮被触发了
可以看到:data-target 指向同一个模态框,data-whatever是自定义的属性名,属性名可以随意更改;
下面是模态框的代码:
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
//头部
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="exampleModalLabel">New message</h4>
</div>
//主体
<div class="modal-body">
<form>
<div class="form-group">
<label for="recipient-name" class="control-label">Recipient:</label>
<input type="text" class="form-control" id="recipient-name">
</div>
<div class="form-group">
<label for="message-text" class="control-label">Message:</label>
<textarea class="form-control" id="message-text"></textarea>
</div>
</form>
</div>
//尾部
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Send message</button>
</div>
</div>
</div>
</div>
可以看到和普通的模态框没有多大差别,要实现页面自动判断哪个按钮被触发了需要监听show.bs.modal事件,就是show
方法调用之后立即触发该事件;
$('#exampleModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget) // Button that triggered the modal
var recipient = button.data('whatever') // 通过自定义的属性值来判断
// If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
// Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
var modal = $(this)
modal.find('.modal-title').text('New message to ' + recipient)
modal.find('.modal-body input').val(recipient)
})
这些是模态框的参数
名称 | 类型 | 默认值 | 描述 |
---|---|---|---|
backdrop | boolean 或 字符串 'static' | true | Includes a modal-backdrop element. Alternatively, specify static for a backdrop which doesn't close the modal on click. |
keyboard | boolean | true | 键盘上的 esc 键被按下时关闭模态框。 |
show | boolean | true | 模态框初始化之后就立即显示出来。 |
.modal(options)
将页面中的某块内容作为模态框激活。接受可选参数 object
。
$('#myModal').modal({
keyboard: false
})
.modal('toggle')
手动打开或关闭模态框。在模态框显示或隐藏之前返回到主调函数中(也就是,在触发 shown.bs.modal
或 hidden.bs.modal
事件之前)。
$('#myModal').modal('toggle')
.modal('show')
手动打开模态框。在模态框显示之前返回到主调函数中 (也就是,在触发 shown.bs.modal
事件之前)。
$('#myModal').modal('show')
.modal('hide')
手动隐藏模态框。在模态框隐藏之前返回到主调函数中 (也就是,在触发 hidden.bs.modal
事件之前)。
$('#myModal').modal('hide')
.modal('handleUpdate')
Readjusts the modal's positioning to counter a scrollbar in case one should appear, which would make the modal jump to the left.
Only needed when the height of the modal changes while it is open.
$('#myModal').modal('handleUpdate')
事件
Bootstrap 的模态框类提供了一些事件用于监听并执行你自己的代码。
All modal events are fired at the modal itself (i.e. at the <div class="modal">
).
事件类型 | 描述 |
---|---|
show.bs.modal | show 方法调用之后立即触发该事件。如果是通过点击某个作为触发器的元素,则此元素可以通过事件的 relatedTarget 属性进行访问。 |
shown.bs.modal | 此事件在模态框已经显示出来(并且同时在 CSS 过渡效果完成)之后被触发。如果是通过点击某个作为触发器的元素,则此元素可以通过事件的 relatedTarget 属性进行访问。 |
hide.bs.modal | hide 方法调用之后立即触发该事件。 |
hidden.bs.modal | 此事件在模态框被隐藏(并且同时在 CSS 过渡效果完成)之后被触发。 |
loaded.bs.modal | 从远端的数据源 加载完数据之后触发该事件。 |