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