Bootstrap JS插件使用实例(2)-模态对话框
发表于 2013-04-27 17:16 ,已有2484次阅读 ，共8个评论
本篇文章讨论Bootstrap的js模态对话框插件(bootstrap-modal.js)
先看个简单示例，可直接粘贴运行：
01.
<!DOCTYPE html>
02.
<html lang="en">
03.
<head>
04.
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
05.
<title>模态对话框示例</title>
06.
<link href="http://www.see-source.com/bootstrap/css/bootstrap.css" rel="stylesheet">
07.
<script type="text/javascript" src="http://www.see-source.com/bootstrap/js/jquery.js"></script>
08.
<script type="text/javascript" src="http://www.see-source.com/bootstrap/js/bootstrap-modal.js"></script>
09.
</head>
10.
11.
<body>
12.
<div class="modal hide" id="myModal">
13.
<div class="modal-header">
14.
<button type="button" class="close" data-dismiss="modal" >×</button>
15.
<h3>对话框标题</h3>
16.
</div>
17.
<div class="modal-body">
18.
<p>你好...</p>
19.
</div>
20.
<div class="modal-footer">
21.
<a href="#" data-dismiss="modal" class="btn">关闭</a>
22.
<a href="#" class="btn btn-primary">保存</a>
23.
</div>
24.
</div>
25.
26.
<button type="button" class="btn" data-toggle="modal" data-target="#myModal" >打开对话框</button>
27.
</body>
28.
</html>
运行效果：
需要注意：
Bootstrap使用的某些HTML元素和CSS属性需要文档类型为HTML5 doctype。因此这一文档类型必须出现在项目的每个页面的开始部分。
1.
<!DOCTYPE html>
2.
<html lang="en">
3.
...
4.
</html>
下面来对上面的代码进行解析下：
bootstrap.css Bootstrap 样式库，这是必不可少的。
jquery.js 引入jquery，Bootstrap插件是jquery插件，依赖于jquery。
bootstrap-modal.js 模式对话框插件
将上面代码中关于对话框的部分摘出来：
01.
<div class="modal hide" id="myModal">
02.
<div class="modal-header">
03.
<button type="button" class="close" data-dismiss="modal" >×</button>
04.
<h3>对话框标题</h3>
05.
</div>
06.
<div class="modal-body">
07.
<p>你好...</p>
08.
09.
</div>
10.
<div class="modal-footer">
11.
<a href="#" data-dismiss="modal" class="btn">关闭</a>
12.
<a href="#" class="btn btn-primary">保存</a>
13.
</div>
14.
</div>
调用方式
1.通过data属性触发
我们无须手写javascript即可在页面中触发对话框。只要在某个激发元素上设置 data-toggle="modal" ，然后将 data-target="#foo" 或href="#foo" 设为某个对话框元素的id，这样点击激发元素就会弹出对话框。
如上面示例中的激发元素：
1.
<button class="btn" type="button" data-toggle="modal" data-target="#myModal" >打开对话框</button>
1.
<div class="modal hide" id="myModal">
2.
....
3.
</div>
2.通过javascript触发
.modal(options)
使用此通用方法将某个元素变成对话框激活
示例：
1.
$('#myModal').modal()
参数设置
在触发对话框时还可以设置一些参数：
| 名称 | 类型 | 默认 | 描述 |
|---|---|---|---|
| backdrop | 布尔值 | true | 为true时，显示对话框的遮蔽背景，鼠标点击背景即可关闭对话框。 为false时，无背景。 |
| keyboard | 布尔值 | true | 为true时按下ESC键关闭模态对话框。 为false时无效。 |
| show | 布尔值 | true | 是否在初始化时显示对话框。 |
参数可以通过data属性或JavaScript传递。对于data属性，将参数名称附着到data-之后，即data-backdrop="true" 。参数可以加到触发元素上，也可加到对话框元素上，示例如下：
1.
<button class="btn" type="button" data-toggle="modal" data-target="#myModal" data-backdrop="false">打开对话框</button>
1.
<div class="modal hide fade" id="myModal" data-backdrop="false">
对于通过javascript设置，如下：
1.
$('#myModal').modal({
2.
keyboard: false
3.
})
另外还提供了几个控制方法，如下：
.modal('toggle')
手动切换对话框打开和关闭， 即在关闭与打开间转换。
1.
$('#myModal').modal('toggle')
.modal('show')
打开对话框
1.
$('#myModal').modal('show')
.modal('hide')
关闭对话框
1.
$('#myModal').modal('hide')
设置过度效果(动态效果)
需要设置2个地方：
首先要引入过度效果的javascript插件bootstrap-transition.js,同时将对话框的html元素添加类样式.fade。如下：
1.
<strong style="margin:0px;padding:0px;"><script type="text/javascript" src="http://www.see-source.com/bootstrap/js/jquery.js"></script>
2.
<script type="text/javascript" src="http://www.see-source.com/bootstrap/js/bootstrap-modal.js"></script>
3.
<script type="text/javascript" src="http://www.see-source.com/bootstrap/js/bootstrap-transition.js"></script></strong>
添加过度效果插件bootstrap-transition.js
1.
<div class="modal hide fade" id="myModal" >
添加类样式.fade
示例：
01.
<strong style="font-family:'sans serif', tahoma, verdana, helvetica;font-size:12px;line-height:1.5;margin:0px;padding:0px;"><strong style="font-family:Verdana, sans-serif, 宋体;font-size:14px;line-height:21px;margin:0px;padding:0px;"><!DOCTYPE html>
02.
<html lang="en">
03.
<head>
04.
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
05.
<title>带过度效果的模态对话框示例</title>
06.
<link href="http://www.see-source.com/bootstrap/css/bootstrap.css" rel="stylesheet">
07.
<script type="text/javascript" src="http://www.see-source.com/bootstrap/js/jquery.js"></script>
08.
<script type="text/javascript" src="http://www.see-source.com/bootstrap/js/bootstrap-modal.js"></script>
09.
<script type="text/javascript" src="http://www.see-source.com/bootstrap/js/bootstrap-transition.js"></script>
10.
</head>
11.
12.
<body>
13.
<div class="modal hide fade" id="myModal">
14.
<div class="modal-header">
15.
<button type="button" class="close" data-dismiss="modal" >×</button>
16.
<h3>对话框标题</h3>
17.
</div>
18.
<div class="modal-body">
19.
<p>你好...</p>
20.
</div>
21.
<div class="modal-footer">
22.
<a href="#" data-dismiss="modal" class="btn">关闭</a>
23.
<a href="#" class="btn btn-primary">保存</a>
24.
</div>
25.
</div>
26.
27.
<button type="button" class="btn" data-toggle="modal" data-target="#myModal" >打开对话框</button>
28.
</body>
29.
</html></strong></strong>
Bootstrap的对话框类扩展了一组事件，可以介入对话框的某些功能实现。
| 事件 | 描述 |
|---|---|
| show | 该事件在调用 show 方法时立刻触发。 |
| shown | 该事件在对话框已经呈现给用户后（要等CSS过渡效果生效后）触发。 |
| hide | 该事件在对话框使用 hide 方法时立刻触发。 |
| hidden | 该事件在对话框已经关闭后（要等CSS过渡效果生效后）触发。 |
1.
$('#myModal').on('事件名称', function () {
2.
// do something…
3.
})
1.
$('#myModal').on('show', function () {
2.
// do something…
3.
})
1.
$('#myModal').on('hidden', function () {
2.
// do something…
3.
})
扫一扫
776
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
