在本教程中，咱们将探讨非常有用的 Bootstrap jQuery插件——模态框。

Bootstrap 模态框是一个轻量级的多用途JavaScript弹出窗口，可自定义和响应式。能够应用它在网站中显示正告窗口、视频和图片。应用Bootstrap构建的网站能够应用模态框来显示条款和条件（作为注册过程的一部分），视频，甚至社交媒体小部件。

为了能够更好地了解它，咱们来看一下Bootstrap模态框的各个组成部分。

Bootstrap 模态框次要分为三个局部：头部（header），注释（body）和页脚（footer）。每个局部都有本人的意义，因而咱们应该正确的应用它们。咱们稍后将探讨这些。Bootstrap模态框最令人兴奋的是什么？你不须要写任何JavaScript代码就能够应用它！所有的代码和款式都是由Bootstrap预约义的。你所须要做的只是应用正确的标记和属性来触发它。

默认的模态框

默认的模态框如下所示：

要触发模态框，你须要增加链接或者按钮。触发元素的标记可能如下所示：

<a href="#" class="btn btn-lg btn-success"    data-toggle="modal"    data-target="#basicModal">Click to open Modal</a>

请留神，link元素有两个自定义数据属性：data-toggle和data-target。toggle通知Bootstrap要做什么，target通知Bootstrap要关上哪个元素。所以每当点击这样的链接时，都会呈现一个id为“basicModal”的模态框。

当初让咱们看看定义模态框所需的代码：

<div class="modal fade" id="basicModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">    <div class="modal-dialog">        <div class="modal-content">            <div class="modal-header">            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>            <h4 class="modal-title" id="myModalLabel">Modal title</h4>            </div>            <div class="modal-body">                <h3>Modal Body</h3>            </div>            <div class="modal-footer">                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>                <button type="button" class="btn btn-primary">Save changes</button>        </div>    </div>  </div></div>

模态框的父div应具备与上述触发元素中应用的雷同的ID。在咱们的例子中是id="basicModal"。

留神：父模态框元素中自定义属性aria-labelledby和aria-hidden让其可被拜访。让所有人都能拜访你的网站是一个很好的做法，所以你应该应用这些属性，因为它们不会对模态框的一般性能产生负面影响。

在模态框的HTML代码中，咱们能够看到一个封装div嵌套在父模态框div内。这个div的类modal-content通知bootstrap.js在哪里查找模态框的内容。在这个div内，咱们须要搁置后面提到的三个局部：头部，注释和页脚。

模态框头部，顾名思义，用于给模态增加一个题目或者如“x”敞开按钮等其余元素。这些元素还应该有一个data-dismiss属性通知Bootstrap哪个元素要暗藏。

而后咱们看一下模态框的注释。能够把它看做一个关上的画布，你能够在其中增加任何类型的数据，包含嵌入YouTube视频，图像或者任何其余内容。

最初，咱们看一下模态框的页脚。该区域默认为右对齐。在这个区域，你能够搁置“保留”，“敞开”，“承受”等操作按钮，这些按钮与“模态框”须要体现的行为相关联。

扭转模态框的大小

之前我提到Bootstrap模态框是响应式的、灵便的。咱们将在本节中看到如何更改其大小。

Bootstrap 3.3.7中模态框有两种新的格调：大和小。给divmodal-dialogdiv 增加一个修饰符类modal-lg能够取得一个更大的模态框，增加modal-sm能够取得一个更小的模态框。

应用jQuery激活模态框

模态框是一个jQuery插件，所以如果你想应用jQuery管制模态框的话，你须要在模态框的选择器上调用.modal()办法。例如：

$('#basicModal').modal(options);

这里的“options”是能够传递给自定义行为的JavaScript对象。例如：

var options = {    "backdrop" : "static"}

可用的option包含：

backdrop：这能够是true或static。这定义你是否心愿用户可能通过单击背景来敞开模态。
keyboard：如果设置为true则模态框将通过ESC键敞开。
show：用于关上和敞开模态框。它能够是true或false。
remote：这是最炫酷的抉择之一。它能够用于应用jQuery的load()办法加载近程内容。你须要在此选项中指定内部页面。默认设置为false。

Bootstrap模态框的事件

你能够通过应用在关上和敞开模态框时触发的各种事件来进一步自定义Bootstrap模态的一般行为。这些事件必须应用jQuery的.on()办法绑定。

可用的事件有：

show.bs.modal：在模态框关上之前被触发。
shown.bs.modal：在显示模态框后触发。
hide.bs.modal：在模态框被暗藏之前触发。
hidden.bs.modal：在模态敞开后触发。
loaded.bs.modal：应用上述的remote选项在近程内容胜利加载到模态框的内容区域时触发。

你能够像这样应用上述之一的事件：

$('#basicModal').on('shown.bs.modal', function (e) {    alert('Modal is successfully shown!');});

在模态框中加载近程内容

在Bootstrap模式中加载近程内容有三种不同的办法。

第一种办法，如上所述,是应用对象options中的remote选项。其余两种形式都是没有JavaScript的，如下所示。

你能够为模态框的触发元素中的href属性提供一个值。在咱们的例子中，触发器是一个链接。例如，咱们能够不应用咱们之前提到的值#而将URL蕴含在特定页面中：

<a class="btn btn-lg btn-default"    data-toggle="modal"    data-target="#largeModal"    href="remote-page.html">Click to open Modal</a>

你还能够为触发元素提供data-remote的自定义数据属性，而不是应用href属性。例如：

<a class="btn btn-lg btn-default" data-toggle="modal"    data-target="#largeModal"    data-remote="remote-page.html">Click to open Modal</a>

论断

模态框是Bootstrap 3提供的最好的插件之一。对于高级设计师来说，它是不须要任何JavaScript代码而在弹出式画面中加载内容的最佳形式之一。