<meta charset=”utf-8″>

在本教程中，咱们将探讨非常有用的 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 代码而在弹出式画面中加载内容的最佳形式之一。