Java小强个人技术博客站点    手机版
当前位置： 首页 >> JS >> Jquery Bootstrap Modals（模态框）

Jquery Bootstrap Modals（模态框）

110981 JS | 2015-3-3

Bootstrap Modals（模态框）是使用定制的 Jquery 插件创建的。它可以用来创建模态窗口丰富用户体验，或者为用户添加实用功能。您可以在 Modals（模态框）中使用 Popover（弹出框）和 Tooltip（工具提示插件）。

在本教程中，将通过一些实例和解释来讨论如何使用 Bootstrap 创建模态窗口。同时，我们也会讨论用于定制的各种可用选项。


您需要 Jquery、Bootstrap CSS 和 JavaScript 文件 bootstrap-modal.js。这个 js 文件位于您下载的 Bootstrap 主文件夹中的 js 文件夹内。

Jquery 位于您的 Bootstrap 主文件夹中的 docs > assets > js 下，名为 jquery.js。或者您可以直接访问 https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js 下载 Jquery。


示例代码：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Bootstrap Modals 示例</title>
<link href="bootstrap.css" rel="stylesheet">
<script src="jquery.js"></script>
<script src="bootstrap-modal.js"></script>
</head>
<body>
<div class="container">
<h2>Bootstrap提示框示例</h2>
<div id="example" class="modal hide fade in" style="display: none; ">
<div class="modal-header">
<a class="close" data-dismiss="modal">关闭</a>
<h3>提示抬头</h3>
</div>
<div class="modal-body">
<h4>内容标题</h4>
<p>内容在这里</p>
</div>
<div class="modal-footer">
<a href="#" class="btn btn-success">确定</a>
<a href="#" class="btn" data-dismiss="modal">关闭</a>
</div>
</div>
<p><a data-toggle="modal" href="#example" class="btn btn-primary btn-large">点击查看示例</a></p>
</body>
<script  type="text/javascript">
// 页面加载即提示内容
//$("#example").modal();
</script>
</html>


下面的表格解释了上面的代码。它将帮助您理解如何使用 Bootstrap Modals（模态框）


代码解释
div id="example"分配给相关 div 的 id，id 的值指向后边要实现 modal（模态框）的 JavaScript。
class="modal hide fade in"Bootstrap CSS 的四个 class - modal、hide、fade 和 in，用于设置 modal（模态框）的布局。
style="display: none;用于保持模态窗口可见，直到触发器触发（比如点击相关按钮）。
<div class="modal-header">modal-header 适用于定义模态窗口标题样式的 class。
a class="close"CSS class close 用于设置模态窗口关闭按钮的样式。
data-dismiss="modal"data-dismiss 是一个定制的 HTML5 data 属性。用于关闭模态窗口。
class="modal-body"modal-body 是 Bootstrap 的一个 CSS class，用于设置模态窗口主体的样式。
class="modal-footer"modal-footer 是 Bootstrap 的一个 CSS class，用于设置模态窗口尾部的样式。
class="btn btn-success"CSS class btn 和 btn-success 用于在模态窗口的尾部创建一个大号的按钮。您可以使用任何其他 Bootstrap 按钮代替。
class="btn"Bootstrap CSS 的 按钮 class btn，用于在模态窗口的尾部创建一个小号的按钮。
data-dismiss="modal"HTML5 定制的 data 属性 data-dismiss，用于关闭模态窗口。
data-toggle="modal"HTML5 定制的 data 属性 data-toggle，用于打开模态窗口。
class="btn btn-primary btn-large"设置按钮样式，点击该按钮则创建模态窗口。
<script src="jquery.min.js"></script>引用 Jquery 文件。
<script src="bootstrap-modal.js"></script>引用 bootstrap modal（模态框）的 JS 文件。


您可以使用 JavaScript 来实现 Bootstrap 模态窗口。只需要在您的 JavaScript 中调用 modal() 即可。您的代码如下所示，您可以在 body 结束标签（即 </body>）前引用它。

$(function ()  
{ $("#identifier").modal();  
});


下面是一些通过 modal() 定制模态窗口外观和感观时可能使用到的选项

backdrop

backdrop 选项用于包含一个 modal-backdrop 元素。

如果您把"使用 JavaScript"实例中行号 2 的代码替换为下面的代码，即给 backdrop 选项赋值为 false，此时就不存在任何的 modal-backdrop。

{ $("#example").modal({backdrop:false});

keyboard

如果使用 keyboard 选项，当点击 escape 时则关闭模态窗口。它的类型是 boolean，默认值是 true。如果把 keyboard 选项的值设置为 false，此时即使点击 escape 也不会关闭模态窗口。

如果您把"使用 JavaScript"实例中行号 2 的代码替换为下面的代码，即给 keyboard 选项赋值为 false，此时点击 escape 则不会关闭模态窗口。

{ $("#example").modal({keyboard:false});

show

如果使用 show 选项，当初始化的时候则会显示模态窗口。它的类型是 boolean，默认值是 true。如果把 show 选项的值设置为 false，在初始化时不会显示模态窗口。

如果您把"使用 JavaScript"实例中行号 2 的代码替换为下面的代码，即给 show 选项赋值为 false，在初始化时不会显示模态窗口。

{ $("#example").modal({show:false});


下面是一些通过 modal() 使用到的方法

.modal(options)

该方法把内容激活为一个 modal（模态框）。您可以引用一个可选的 object 类型的 options 参数。如果您在本教程的第一个实例中的 </body> 标签前添加下面的代码，此时就不存在任何的 modal（模态框） backdrop 元素

$('#example').modal({
  backdrop: false
})

.modal('toggle')

该方法手动切换一个 modal（模态框）。如果您在本教程的第一个实例中的 </body> 标签前添加下面的代码，即可手动切换 modal（模态框）。

$('#example').modal('toggle')

.modal(show)

该方法可用于手动打开一个 modal（模态框）。如果您在本教程的第一个实例中的 </body> 标签前添加下面的代码，即可手动打开 modal（模态框）。

$('#example').modal('show')

.modal(hide)

该方法可用于手动隐藏一个 modal（模态框）。如果您在本教程的第一个实例中的 </body> 标签前添加下面的代码，即可手动隐藏 modal（模态框）。

$('#example').modal('hide')


下面是 Modals（模态框）相关的事件。这些事件用于截获并执行自己的代码

show

当 show 实例方法被调用之后，此事件被立即触发。

shown

当模态框显示出来之后（同时 CSS 过渡效果也已执行完毕），此事件被触发。

hide

当 hide 实例方法被调用之后，此事件被立即触发。Immediately after the hide instance method has been called, this event is called.

hidden

当模态框向用户隐藏之后（同时 CSS 过渡效果也已执行完毕），此事件被触发。



demo.zip

点击下载示例

推荐您阅读更多有关于“ JQUERY Bootstrap Modals 关闭 加载 ”的文章

上一篇：VisualSVN Server Win2003无法安装 下一篇：10个迹象表明程序员编码太久了

猜你喜欢

发表评论：

评论：

回复 iMJMJ 评论于 2021-09-23 04:14
学习了，涨姿势啊！！