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 了。

 

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

 

通过javascript调用模态对话框：

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

选项（options）：

$('#myModal').modal({
    backdrop:true,
    keyboard:true,
    show:true
});

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

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

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


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

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

<a class="btn" data-toggle="modal" href="#myModal" 或者 data-target="#myModal">点击触发对话框</a>

<div class="modal" id="myModal">
  <div class="modal-header">
    <a class="close" data-dismiss="modal">×</a>
    <h3>对话框标题</h3>
  </div>
  <div class="modal-body">
    <p>对话框内容</p>
  </div>
  <div class="modal-footer">
    <a href="#" class="btn">关闭</a>
    <a href="#" class="btn btn-primary">保存更新</a>
  </div>
</div>

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

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

　　　　data-backdrop="false"

　　　　data-keyboard="false"

　　　　data-show="false"

　　　　

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

 

　　　　

---

 

方法：

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

.modal(options)

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

$('#myModal').modal({
  keyboard: false
})

.modal('toggle')

手动切换对话框打开和关闭。

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

.modal('show')

打开对话框

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

.modal('hide')

关闭对话框

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

事件

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

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

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

 

---

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