結(jié)構(gòu)分析

Bootstrap框架中的模態(tài)彈出框，分別運用了“modal”、“modal-dialog”和“modal-content”樣式，而彈出窗真正的內(nèi)容都放置在“modal-content”中，其主要又包括三個部分：
1. 彈出框頭部，一般使用“modal-header”表示，主要包括標(biāo)題和關(guān)閉按鈕
2. 彈出框主體，一般使用“modal-body”表示，彈出框的主要內(nèi)容
3. 彈出框腳部，一般使用“modal-footer”表示，主要放置操作按鈕

 
  
   
    ×Close
    模態(tài)彈出窗標(biāo)題
   
   
    
模態(tài)彈出窗主體內(nèi)容
   
   
    關(guān)閉
    保存
   
  
 

實現(xiàn)原理

bootstrap中的“模態(tài)彈出框”有以下幾個特點：
1、模態(tài)彈出窗是固定在瀏覽器中的。
2、在全屏狀態(tài)下，模態(tài)彈出窗寬度是自適應(yīng)的，而且modal-dialog水平居中。
3、當(dāng)瀏覽器視窗大于768px時，模態(tài)彈出窗的寬度為600px。

兩種尺寸選擇

除此之外，Bootstrap框架還為模態(tài)彈出窗提供了不同尺寸，一個是大尺寸樣式“modal-lg”，另一個是小尺寸樣式“modal-sm”。其結(jié)構(gòu)上稍做調(diào)整：

觸發(fā)方法

眾所周知，模態(tài)彈出窗在頁面加載完成時，是被隱藏在頁面中的，只有通過一定的動作（事件）才能觸發(fā)模態(tài)彈出窗的顯示。在Bootstrap框架中實現(xiàn)方法有2種，接下來分別來介紹這2種觸發(fā)模態(tài)彈出窗的使用方法。

聲明式觸發(fā)方法

方法一

模態(tài)彈出窗聲明，只需要自定義兩個必要的屬性：data-toggle和data-target（bootstrap中聲明式觸發(fā)方法一般依賴于這些自定義的data-xxx 屬性。比如data-toggle=”” 或者 data-dismiss=”“）。例如：

點擊我會彈出模態(tài)彈出窗


 
  
  
  
 

注意以下事項：
1、data-toggle必須設(shè)置為modal(toggle中文翻譯過來就是觸發(fā)器)；
2、data-target可以設(shè)置為CSS的選擇符，也可以設(shè)置為模態(tài)彈出窗的ID值，一般情況設(shè)置為模態(tài)彈出窗的ID值，因為ID值是唯一的值。

方法二

觸發(fā)模態(tài)彈出窗也可以是一個鏈接元素，那么可以使用鏈接元素自帶的href屬性替代data-target屬性，如：

點擊我會彈出模態(tài)彈出窗


 
  
  
  
 

不過建議還是使用統(tǒng)一使用data-target的方式來觸發(fā)。

增加過度動畫

為模態(tài)彈出框增加過度動畫效果：
可通過給“.modal”增加類名“fade”為模態(tài)彈出框增加一個過渡動畫效果。

小的模態(tài)彈出窗

 
  
   
    ×Close
    模態(tài)彈出窗標(biāo)題
   
   
    
模態(tài)彈出窗主體內(nèi)容
   
   
    關(guān)閉
    保存
   
  
 

模態(tài)彈出窗的使用（data-參數(shù)說明）

除了通過data-toggle和data-target來控制模態(tài)彈出窗之外，Bootstrap框架針對模態(tài)彈出框還提供了其他自定義data-屬性，來控制模態(tài)彈出窗。比如說:是否有灰色背景modal-backdrop，是否可以按ESC鍵關(guān)閉模態(tài)彈出窗。有關(guān)于Modal彈出窗自定義屬性相關(guān)說明如下所示：

使用（JavaScript觸發(fā)）

除了使用自定義屬性觸發(fā)模態(tài)彈出框之外，還可以通過JavaScript方法來觸發(fā)模態(tài)彈出窗。通過給一個元素一個事件，來觸發(fā)。比如說給一個按鈕一個單擊事件，然后觸發(fā)模態(tài)彈出窗。如下面的一個簡單示例：

點擊我


 
  
   
    ×Close
    模態(tài)彈出窗標(biāo)題
   
   
    
模態(tài)彈出窗主體內(nèi)容
   
   
    關(guān)閉
    保存
   
  
 

JavaScript觸發(fā)的彈出窗代碼：

$(function(){
 $(".btn").click(function(){
 $("#mymodal").modal();
 });
});

設(shè)置參數(shù)

使用JavaScript觸發(fā)模態(tài)彈出窗時，Bootstrap框架提供了一些設(shè)置，主要包括屬性設(shè)置、參數(shù)設(shè)置和事件設(shè)置。

屬性設(shè)置

模態(tài)彈出窗默認(rèn)支持的自定義屬性主要有：

比如你不想讓用戶按ESC鍵關(guān)閉模態(tài)彈出窗，你就可以這樣做：

$(function(){
 $(".btn").click(function(){
  $("#mymodal").modal({
   keyboard:false
  });
 });
});

參數(shù)設(shè)置

在Bootstrap框架中還為模態(tài)彈出窗提供了三種參數(shù)設(shè)置，具體說明如下：

事件設(shè)置

模態(tài)彈出窗還支持四種類型的事件，分別是模態(tài)彈出窗的彈出前、彈出后，關(guān)閉前、關(guān)閉后，具體描述如下：

調(diào)用方法也非常簡單：

$('#myModal').on('hidden.bs.modal', function (e) {
 // 處理代碼...
})

以上是“Bootstrap中模態(tài)彈出框的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司行業(yè)資訊頻道！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)建站www.cdcxhl.com，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。