Bootstrap JS插件使用实例(2)-模态对话框

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"  >&times;</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"  >&times;</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>
bootstrap定义的对话框的结构。.modal样式用于定义整个对话框。对话框内包含三部分:modal-header、modal-body、modal-footer 。与上面的css样式名对应。modal-header主要用于显示标题,还可以带有关闭按钮。modal-body是正文部分,具体内容可自定义,一般可以是提示语,或是个表单。modal-footer主要显示操作按钮,如上面的"关闭"、"保存"。这三部分是一般对话框都具备的结构。


调用方式

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>
其中data-target 的值要与某个对话框的id一致,表示将其作为 对话框并激活、打开。如上面示例中的id为myModal:

1. <div class="modal hide" id="myModal">
2. ....
3. </div>


2.通过javascript触发

.modal(options)

使用此通用方法将某个元素变成对话框激活

示例:

1. $('#myModal').modal()
将id="myModal"的元素作为对话框并打开。


参数设置

在触发对话框时还可以设置一些参数:

名称 类型 默认 描述
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"  >&times;</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. })
添加show事件
1. $('#myModal').on('hidden', function () {
2. // do something…
3. })
添加hidden事件
  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值