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

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

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

實現(xiàn)原理

bootstrap中的“模態(tài)彈出框”有以下幾個特點：
1、模態(tài)彈出窗是固定在瀏覽器中的。
2、在全屏狀態(tài)下，模態(tài)彈出窗寬度是自適應的，而且modal-dialog水平居中。
3、當瀏覽器視窗大于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)彈出窗標題
   
   
    
模態(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)彈出窗標題
   
   
    
模態(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)彈出窗默認支持的自定義屬性主要有：

比如你不想讓用戶按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)容對大家有所幫助，如果還想學習更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司行業(yè)資訊頻道！

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

分享至：

   

關(guān)于我們

公司簡介 發(fā)展歷程

服務項目

高端網(wǎng)站建設(shè) 小程序開發(fā) APP開發(fā) 網(wǎng)絡(luò)營銷

建站知識

網(wǎng)站建設(shè) 網(wǎng)站設(shè)計 網(wǎng)站制作 小程序

聯(lián)系我們

公司地址 人才招聘

成都 重慶



電話：028-86922220



地址：成都市太升南路288號錦天國際A幢1002號



電話：028-86922220



地址：重慶市南岸區(qū)彈子石騰龍大道58號2棟21-6

版權(quán)所有：成都創(chuàng)新互聯(lián)科技有限公司重慶分公司 渝ICP備2021005571號-4