模态框
滚动长内容
居中显示
Tooltips工具提示和弹出提示框
使用栅格
变更模态框内容
$('#exampleModalChange').on('show.bs.modal', function (event) {
    var button = $(event.relatedTarget);
    var recipient = button.data('whatever');
    var modal = $(this);
    modal.find('.modal-title').text('New message to ' + recipient);
    modal.find('.modal-body input').val(recipient);
})
尺寸大小

用法

模态插件通过数据属性或JavaScript按需切换您隐藏的内容。它将 .modal-open 加到了 <body> 上，以覆盖默认的滚动行为，并生成 .modal-backdrop 来提供点击区域，以便在动态模态窗外面点击一下就能移除模态。

使用数据属性

启动一个动态视窗而无需编写JavaScript，在控制元素上设置 data-toggle="modal"（如按钮），以及一个 data-target="#foo" 或 href="#foo" 来指定特定的动态视窗进行切换。

<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>
通过JavaScript

使用单行JavaScript调用ID为 myModal的动态模态框:

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

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-backdrop="".

名称 Type类型 默认值 描述
backdrop boolean or the string 'static' true 包括动态视窗背景元素，或者指定 static 在点击背景时不关闭动态模态框。
keyboard boolean true 按下 esc 时关闭动态视窗。
focus boolean true 初始化focus动态视窗。
show boolean true 初始化时显示模态。
方法
异步传输与转换

所有的API方法都支持异步传输，且一旦 转换开始，在结束之前它们会返回给调用者，直到完成这个动画。另外， 过渡组件上的方法将被忽略。

请参阅JavaScript文档以了解更多信息。

.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')

如果动态模态框在打开状态（比如在出现滚动条的情况下）重新改变高度，并调整模态窗的位置。

$('#myModal').modal('handleUpdate')
.modal('dispose')

销毁一个元素的Modal。

事件

Bootstrap’s modal class exposes a few events for hooking into modal functionality. All modal events are fired at the modal itself (i.e. at the <div class="modal">).

Event事件类型 描述
show.bs.modal 当调用show实例方法时，会立即触发该事件。如果是由点击引起的，被点击的元素是可用的，成为Event对象的relatedTarget属性。
shown.bs.modal 当模态框对用户来说可见时（需要等待CSS过渡完成），会触发该事件。如果是由点击引起的，被点击的元素是可用的，成为Event对象的relatedTarget属性。
hide.bs.modal 当调用hide实例方法时，会立即触发该事件。
hidden.bs.modal 当模态框对用户来说终于完成隐藏时（需要等待CSS过渡完成），会触发该事件。 
$('#myModal').on('hidden.bs.modal', function (e) {
    // do something...
})