Bootstrap JS插件使用實例(2)-模態對話框

發表於 2013-04-27 17:16 ,已有363次閱讀，共0個評論

本篇文章討論Bootstrap的js模態對話框插件(bootstrap-modal.js)javascript

先看個簡單示例，可直接粘貼運行：css

 
     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>

運行效果：html

須要注意：java

Bootstrap使用的某些HTML元素和CSS屬性須要文檔類型爲HTML5 doctype。所以這一文檔類型必須出如今項目的每一個頁面的開始部分。jquery

 
     1. 
     <!DOCTYPE html> 
    
     2. 
     <html lang="en"> 
    
     3. 
     ... 
    
     4. 
     </html>

下面來對上面的代碼進行解析下：bootstrap

bootstrap.css Bootstrap 樣式庫，這是必不可少的。jquery插件

jquery.js 引入jquery，Bootstrap插件是jquery插件，依賴於jquery。ide

bootstrap-modal.js 模式對話框插件ui

將上面代碼中關於對話框的部分摘出來：spa

 
     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事件