這篇文章主要介紹bootstrap模態(tài)框的使用示例，文中介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們一定要看完！

成都創(chuàng)新互聯(lián)公司是一家專注于成都網(wǎng)站建設(shè)、網(wǎng)站制作與策劃設(shè)計,武威網(wǎng)站建設(shè)哪家好?成都創(chuàng)新互聯(lián)公司做網(wǎng)站,專注于網(wǎng)站建設(shè)10年,網(wǎng)設(shè)計領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:武威等地區(qū)。武威做網(wǎng)站價格咨詢:18980820575

Bootstrap 模態(tài)框是一個輕量級的多用途JavaScript彈出窗口，可自定義和響應(yīng)式?？梢允褂盟诰W(wǎng)站中顯示警告窗口、視頻和圖片。使用Bootstrap構(gòu)建的網(wǎng)站可以使用模態(tài)框來顯示條款和條件（作為注冊過程的一部分），視頻，甚至社交媒體小部件。

為了可以更好地理解它，我們來看一下Bootstrap模態(tài)框的各個組成部分。

Bootstrap 模態(tài)框主要分為三個部分：頭部（header），正文（body）和頁腳（footer）。每個部分都有自己的意義，因此我們應(yīng)該正確的使用它們。我們稍后將討論這些。Bootstrap模態(tài)框最令人興奮的是什么？你不需要寫任何JavaScript代碼就可以使用它！所有的代碼和樣式都是由Bootstrap預(yù)定義的。你所需要做的只是使用正確的標(biāo)記和屬性來觸發(fā)它。

默認(rèn)的模態(tài)框

默認(rèn)的模態(tài)框如下所示：

要觸發(fā)模態(tài)框，你需要添加鏈接或者按鈕。觸發(fā)元素的標(biāo)記可能如下所示：

Click to open Modal

請注意，link元素有兩個自定義數(shù)據(jù)屬性：data-toggle和data-target。toggle告訴Bootstrap要做什么，target告訴Bootstrap要打開哪個元素。所以每當(dāng)點擊這樣的鏈接時，都會出現(xiàn)一個id為“basicModal”的模態(tài)框。

現(xiàn)在讓我們看看定義模態(tài)框所需的代碼：

    

        

            

            ×
            
Modal title
            
            

                
Modal Body
            
            

                Close
                Save changes
        
    
  

模態(tài)框的父div應(yīng)具有與上述觸發(fā)元素中使用的相同的ID。在我們的例子中是id="basicModal"。

注意：父模態(tài)框元素中自定義屬性aria-labelledby和aria-hidden讓其可被訪問。讓所有人都能訪問你的網(wǎng)站是一個很好的做法，所以你應(yīng)該使用這些屬性，因為它們不會對模態(tài)框的普通功能產(chǎn)生負(fù)面影響。

在模態(tài)框的HTML代碼中，我們可以看到一個封裝div嵌套在父模態(tài)框div內(nèi)。這個div的類modal-content告訴bootstrap.js在哪里查找模態(tài)框的內(nèi)容。在這個div內(nèi)，我們需要放置前面提到的三個部分：頭部，正文和頁腳。

模態(tài)框頭部，顧名思義，用于給模態(tài)添加一個標(biāo)題或者如“x”關(guān)閉按鈕等其他元素。這些元素還應(yīng)該有一個data-dismiss屬性告訴Bootstrap哪個元素要隱藏。

然后我們看一下模態(tài)框的正文?？梢园阉醋鲆粋€打開的畫布，你可以在其中添加任何類型的數(shù)據(jù)，包括嵌入YouTube視頻，圖像或者任何其他內(nèi)容。

最后，我們看一下模態(tài)框的頁腳。該區(qū)域默認(rèn)為右對齊。在這個區(qū)域，你可以放置“保存”，“關(guān)閉”，“接受”等操作按鈕，這些按鈕與“模態(tài)框”需要表現(xiàn)的行為相關(guān)聯(lián)。

現(xiàn)在我們完成了我們的第一個模態(tài)框！你可以在我們的演示頁面上查看。

改變模態(tài)框的大小

Bootstrap模態(tài)框是響應(yīng)式的、靈活的。

Bootstrap 3.3.7中模態(tài)框有兩種新的風(fēng)格：大和小。給divmodal-dialogdiv 添加一個修飾符類modal-lg可以獲得一個更大的模態(tài)框，添加modal-sm可以獲得一個更小的模態(tài)框。

使用jQuery激活模態(tài)框

模態(tài)框是一個jQuery插件，所以如果你想使用jQuery控制模態(tài)框的話，你需要在模態(tài)框的選擇器上調(diào)用.modal()方法。例如：

$('#basicModal').modal(options);

這里的“options”是可以傳遞給自定義行為的JavaScript對象。例如：

var options = {
    "backdrop" : "static"
}

可用的option包括：

backdrop：這可以是true或static。這定義你是否希望用戶能夠通過單擊背景來關(guān)閉模態(tài)。

keyboard：如果設(shè)置為true則模態(tài)框?qū)⑼ㄟ^ESC鍵關(guān)閉。

show：用于打開和關(guān)閉模態(tài)框。它可以是true或false。

remote：這是最炫酷的選擇之一。它可以用于使用jQuery的load()方法加載遠(yuǎn)程內(nèi)容。你需要在此選項中指定外部頁面。默認(rèn)設(shè)置為false。

Bootstrap模態(tài)框的事件

你可以通過使用在打開和關(guān)閉模態(tài)框時觸發(fā)的各種事件來進(jìn)一步自定義Bootstrap模態(tài)的普通行為。這些事件必須使用jQuery的.on()方法綁定。

可用的事件有：

show.bs.modal：在模態(tài)框打開之前被觸發(fā)。

shown.bs.modal：在顯示模態(tài)框后觸發(fā)。

hide.bs.modal：在模態(tài)框被隱藏之前觸發(fā)。

hidden.bs.modal：在模態(tài)關(guān)閉后觸發(fā)。

loaded.bs.modal：使用上述的remote選項在遠(yuǎn)程內(nèi)容成功加載到模態(tài)框的內(nèi)容區(qū)域時觸發(fā)。

你可以像這樣使用上述之一的事件：

$('#basicModal').on('shown.bs.modal', function (e) {
    alert('Modal is successfully shown!');
});

在模態(tài)框中加載遠(yuǎn)程內(nèi)容

在Bootstrap模式中加載遠(yuǎn)程內(nèi)容有三種不同的方法。

第一種方法，如上所述,是使用對象options中的remote選項。其他兩種方式都是沒有JavaScript的，如下所示。

你可以為模態(tài)框的觸發(fā)元素中的href屬性提供一個值。在我們的例子中，觸發(fā)器是一個鏈接。例如，我們可以不使用我們之前提到的值#而將URL包含在特定頁面中：

Click to open Modal

你還可以為觸發(fā)元素提供data-remote的自定義數(shù)據(jù)屬性，而不是使用href屬性。例如：

Click to open Modal

結(jié)論

模態(tài)框是Bootstrap 3提供的最好的插件之一。對于初級設(shè)計師來說，它是不需要任何JavaScript代碼而在彈出式畫面中加載內(nèi)容的最佳方式之一。

以上是bootstrap模態(tài)框的使用示例的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！