BootStrap 对话框

BootStrap 就不介绍了，百度一下很多介绍，总之是Twitter 的一些工程师做的一个开源的前台框架

首先第一个就是： 强调！ 所有的javascript插件都需要最新版本的jQuery支持。官方自带的是1.8.1 /*! jQuery v@1.8.1 jquery.com | jquery.org/license */

第二个是： 强调！ 要实现对话框显示与消隐时的动画效果，必须包含 bootstrap-transition.js.，再对 .modal 元素应用 .fade ，即可实现淡入淡出。

第三个自然就是 bootstrap-modal.js 了。

1 <script type="text/javascript" src="JS/jquery.js"></script>
2 <script type="text/javascript" src="JS/bootstrap/js/bootstrap-transition.js"></script>
3 <script type="text/javascript" src="JS/bootstrap/js/bootstrap-modal.js"></script>

通过javascript调用模态对话框：

1 $('#myModal').modal(options)

选项（options）：

1 $('#myModal').modal({
2     backdrop:true,
3     keyboard:true,
4     show:true
5 });

三个都是布尔值，默认都为 truebackdrop：为true时，显示对话框的遮蔽背景，鼠标点击背景即可关闭对话框。为false时，无背景。

keyboard：为true时按下ESC键关闭模态对话框。为false时无效。

show：是否在初始化时显示对话框。

不通过手写JavaScript调用模态对话框：

　　首先要在某个激发元素上设置 data-toggle="modal" 　　然后在激发元素上设置 data-target="#myModal" 或href="#myModal" 　　其中# 是代表 id 的意思 myModal是 模态对话框的id　　注意：只能用id 不能用class

 1 <a class="btn" data-toggle="modal" href="#myModal" 或者 data-target="#myModal">点击触发对话框</a>
 2
 3 <div class="modal" id="myModal">
 4   <div class="modal-header">
 5     <a class="close" data-dismiss="modal">×</a>
 6     <h3>对话框标题</h3>
 7   </div>
 8   <div class="modal-body">
 9     <p>对话框内容</p>
10   </div>
11   <div class="modal-footer">
12     <a href="#" class="btn">关闭</a>
13     <a href="#" class="btn btn-primary">保存更新</a>
14   </div>
15 </div>

　　不手写JavaScript设置选项（options）：

　　　　可以在激发元素或是对话框元素的“data-属性”中设置选项值：

　　　　data-backdrop="false"

　　　　data-keyboard="false"

　　　　data-show="false"

1 <a class="btn" data-toggle="modal" href="#myModal"  data-keyboard="false" data-backdrop="false" >点击"无ESC关闭，无遮蔽背景"演示</a>

方法：

　　由于是在Jquery的基础之上，所以下面基本和Jquery的事件处理和效果一样。

.modal(options)

将某个元素变成对话框激活，接受一个 object 做为可选参数。

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')

事件

Bootstrap的对话框类扩展了一组事件，可以介入对话框的某些功能实现。

事件	描述
show	该事件在调用 `show` 方法时立刻触发。
shown	该事件在对话框已经呈现给用户后（要等CSS过渡效果生效后）触发。
hide	该事件在对话框使用 `hide` 方法时立刻触发。
hidden	该事件在对话框已经关闭后（要等CSS过渡效果生效后）触发。

1 $('#myModal').on('hidden', function () {
2   // do something…
3 })

官方地址：http://twitter.github.com/bootstrap/javascript.html中文版：http://wrongwaycn.github.com/bootstrap/docs/javascript.html

转载于:https://www.cnblogs.com/boingTan/archive/2012/11/30/2795742.html