Bootstrap 模态对话框详解与只加载一次 remote 数据的解决办法
Pony Html, 技术分享 围观1228次
Bootstrap真的好用！地球人都知道，今天学习一下在项目中使用模态框遇到的问题！
首先模态框（Modal）是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等。如果您想要单独引用该插件的功能，那么您需要引用 modal.js。或者，正如 Bootstrap 插件概览 一章中所提到，您可以引用 bootstrap.js 或压缩版的 bootstrap.min.js。
用法
您可以切换模态框（Modal）插件的隐藏内容：
实例
一个静态的模态窗口实例，如下面的实例所示：
4 |
<title>Bootstrap 实例 - 模态框（Modal）插件</title> |
5 |
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> |
6 |
<script src="/scripts/jquery.min.js"></script> |
7 |
<script src="/bootstrap/js/bootstrap.min.js"></script> |
13 |
<button class="btn btn-primary btn-lg" data-toggle="modal" |
14 |
data-target="#myModal"> |
19 |
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" |
20 |
aria-labelledby="myModalLabel" aria-hidden="true"> |
21 |
<div class="modal-dialog"> |
22 |
<div class="modal-content"> |
23 |
<div class="modal-header"> |
24 |
<button type="button" class="close" |
25 |
data-dismiss="modal" aria-hidden="true"> |
28 |
<h4 class="modal-title" id="myModalLabel"> |
32 |
<div class="modal-body"> |
35 |
<div class="modal-footer"> |
36 |
<button type="button" class="btn btn-default" |
37 |
data-dismiss="modal">关闭 |
39 |
<button type="button" class="btn btn-primary"> |
结果如下所示：
代码讲解：
- 使用模态窗口，您需要有某种触发器。您可以使用按钮或链接。这里我们使用的是按钮。
- 如果您仔细查看上面的代码，您会发现在 <button> 标签中，data-target=”#myModal” 是您想要在页面上加载的模态框的目标。您可以在页面上创建多个模态框，然后为每个模态框创建不同的触发器。现在，很明显，您不能在同一时间加载多个模块，但您可以在页面上创建多个在不同时间进行加载。
- 在模态框中需要注意两点：
- 第一是 .modal，用来把 <div> 的内容识别为模态框。
- 第二是 .fade class。当模态框被切换时，它会引起内容淡入淡出。
- aria-labelledby=”myModalLabel”，该属性引用模态框的标题。
- 属性 aria-hidden=”true” 用于保持模态窗口不可见，直到触发器被触发为止（比如点击在相关的按钮上）。
- <div>，modal-header 是为模态窗口的头部定义样式的类。
- class=”close”，close 是一个 CSS class，用于为模态窗口的关闭按钮设置样式。
- data-dismiss=”modal”，是一个自定义的 HTML5 data 属性。在这里它被用于关闭模态窗口。
- class=”modal-body”，是 Bootstrap CSS 的一个 CSS class，用于为模态窗口的主体设置样式。
- class=”modal-footer”，是 Bootstrap CSS 的一个 CSS class，用于为模态窗口的底部设置样式。
- data-toggle=”modal”，HTML5 自定义的 data 属性 data-toggle 用于打开模态窗口。
选项
有一些选项可以用来定制模态窗口（Modal Window）的外观和感观，它们是通过 data 属性或 JavaScript 来传递的。下表列出了这些选项：
| 选项名称 |
类型/默认值 |
Data 属性名称 |
描述 |
| backdrop |
boolean 或 string ‘static’
默认值：true |
data-backdrop |
指定一个静态的背景，当用户点击模态框外部时不会关闭模态框。 |
| keyboard |
boolean
默认值：true |
data-keyboard |
当按下 escape 键时关闭模态框，设置为 false 时则按键无效。 |
| show |
boolean
默认值：true |
data-show |
当初始化时显示模态框。 |
| remote |
path
默认值：false |
data-remote |
使用 jQuery .load 方法，为模态框的主体注入内容。
如果添加了一个带有有效 URL 的 href，
则会加载其中的内容。如下面的实例所示： <a data-toggle="modal" href="remote.html" data-target="#modal">请点击我</a> |
方法
下面是一些可与 modal() 一起使用的有用的方法。
| 方法 |
描述 |
实例 |
| Options: .modal(options) |
把内容作为模态框激活。接受一个可选的选项对象。 |
$('#identifier').modal({keyboard: false}) |
| Toggle: .modal(‘toggle’) |
手动切换模态框。 |
$('#identifier').modal('toggle') |
| Show: .modal(‘show’) |
手动打开模态框。 |
$('#identifier').modal('show') |
| Hide: .modal(‘hide’) |
手动隐藏模态框。 |
$('#identifier').modal('hide') |
事件
下表列出了模态框中要用到事件。这些事件可在函数中当钩子使用。
| 事件 |
描述 |
实例 |
| show.bs.modal |
在调用 show 方法后触发。 |
$('#identifier').on('show.bs.modal', function () {
// 执行一些动作...
}) |
| shown.bs.modal |
当模态框对用户可见时触发（将等待 CSS 过渡效果完成）。 |
$('#identifier').on('shown.bs.modal', function () {
// 执行一些动作...
}) |
| hide.bs.modal |
当调用 hide 实例方法时触发。 |
$('#identifier').on('hide.bs.modal', function () {
// 执行一些动作...
}) |
| hidden.bs.modal |
当模态框完全对用户隐藏时触发。 |
$('#identifier').on('hidden.bs.modal', function () {
// 执行一些动作...
}) |
关于Bootstrap 模态对话框只加载一次 remote 数据的解决办法
可以使用 remote 选项指定一个 URL，这样对话框在第一次弹出的时候就会自动从这个地址加载数据到 .modal-body 中，但是它只会加载一次，不过通过在事件中调用 removeData() 方法可以解决这个问题。
使用 remote 选项让模态对话框加载页面到 .modal-body 中
有两种方法，一种是使用链接，另一种就是使用脚本。
2.1 使用链接
1 |
<a href="page.jsp" data-toggle="modal" data-target="#myModal">打开对话框</a> |
当点击此链接时，page.jsp 的内容会被加载到对话框的 .modal-body 中，随即显示对话框。
2.2 使用JS
这段脚本的效果和使用链接是一样的，当这段脚本执行后，page.jsp 的内容会被加载到对话框的 .modal-body 中，随即显示对话框。
这两种方法的背后，都是 Bootstrap 调用了 jQuery 的 load() 方法，从服务器端加载了 page.jsp 页面。但这个加载只会发生一次，后面不管你点击几次链接，或者执行几次脚本，哪怕改变传递给 remote 选项的值，对话框都不会重新加载页面，这真是个让人头疼的事情。不过问题还是能够解决的。
在搜索并查阅了相关文档后，发现在对话框的 hidden 事件里写上一条语句就可以了：
1 |
$("#myModal").on("hidden", function() { |
2 |
$(this).removeData("modal"); |
也可以在每次打开对话框之前移除数据，效果是一样的。
注：上面的代码基于 Bootstrap v2，如果使用 Bootstrape v3，模态对话框的 HTML 和事件的写法有一些不同，例如对于上面的 hidden 事件，要写成：
1 |
$("#myModal").on("hidden.bs.modal", function() { |
2 |
$(this).removeData("bs.modal"); |
