本篇內(nèi)容介紹了“Bootstrap模態(tài)框的使用方法是什么”的有關(guān)知識(shí)，在實(shí)際案例的操作過(guò)程中，不少人都會(huì)遇到這樣的困境，接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

創(chuàng)新互聯(lián)成立十余年來(lái)，這條路我們正越走越好，積累了技術(shù)與客戶資源，形成了良好的口碑。為客戶提供成都網(wǎng)站建設(shè)、成都做網(wǎng)站、網(wǎng)站策劃、網(wǎng)頁(yè)設(shè)計(jì)、主機(jī)域名、網(wǎng)絡(luò)營(yíng)銷(xiāo)、VI設(shè)計(jì)、網(wǎng)站改版、漏洞修補(bǔ)等服務(wù)。網(wǎng)站是否美觀、功能強(qiáng)大、用戶體驗(yàn)好、性價(jià)比高、打開(kāi)快等等，這些對(duì)于網(wǎng)站建設(shè)都非常重要，創(chuàng)新互聯(lián)通過(guò)對(duì)建站技術(shù)性的掌握、對(duì)創(chuàng)意設(shè)計(jì)的研究為客戶提供一站式互聯(lián)網(wǎng)解決方案，攜手廣大客戶，共同發(fā)展進(jìn)步。

在本教程中，我們將討論十分有用的 Bootstrap jQuery插件——模態(tài)框。

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

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

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

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

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

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

<a href="#" class="btn btn-lg btn-success" 
   data-toggle="modal" 
   data-target="#basicModal">Click to open Modal</a>

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

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

<div class="modal fade" id="basicModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h5 class="modal-title" id="myModalLabel">Modal title</h5>
            </div>
            <div class="modal-body">
                <h4>Modal Body</h4>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
        </div>
    </div>
  </div>
</div>

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

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

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

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

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

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

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

之前我提到Bootstrap模態(tài)框是響應(yīng)式的、靈活的。我們將在本節(jié)中看到如何更改其大小。

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

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

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

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

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

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

可用的option包括：

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

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

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

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

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

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

可用的事件有：

• show.bs.modal：在模態(tài)框打開(kā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選項(xiàng)在遠(yuǎn)程內(nèi)容成功加載到模態(tài)框的內(nèi)容區(qū)域時(shí)觸發(fā)。

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

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

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

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

第一種方法，如上所述,是使用對(duì)象options中的remote選項(xiàng)。其他兩種方式都是沒(méi)有JavaScript的，如下所示。

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

<a class="btn btn-lg btn-default" 
   data-toggle="modal" 
   data-target="#largeModal" 
   href="remote-page.html">Click to open Modal</a>

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

<a class="btn btn-lg btn-default" data-toggle="modal" 
   data-target="#largeModal" 
   data-remote="remote-page.html">Click to open Modal</a>

“Bootstrap模態(tài)框的使用方法是什么”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！

本文標(biāo)題：Bootstrap模態(tài)框的使用方法是什么
當(dāng)前地址：http://sd-ha.com/article10/gegggo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站導(dǎo)航、服務(wù)器托管、軟件開(kāi)發(fā)、品牌網(wǎng)站建設(shè)、企業(yè)建站、面包屑導(dǎo)航

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)