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