Bootstrap學習之淺析模態框的使用方法

這篇文章帶大家了解一下Bootstrap中的模態框，介紹一下改變模態框大小、在模態框中載入遠端內容的方法，希望對大家有幫助！

在本教學中，我們將討論十分有用的 Bootstrap jQuery外掛程式－模態框。

Bootstrap 模態方塊是一個輕量級的多用途JavaScript彈出窗口，可自訂和響應式。可以使用它在網站中顯示警告視窗、影片和圖片。使用Bootstrap建立的網站可以使用模態框來顯示條款和條件（作為註冊過程的一部分），視頻，甚至社交媒體小部件。

為了可以更好地理解它，我們來看看Bootstrap模態框的各個組成部分。 【相關推薦：《bootstrap教程》】

Bootstrap 模數框主要分為三個部分：頭部（header），正文（body）和頁腳（footer）。每個部分都有自己的意義，因此我們應該正確的使用它們。我們稍後將討論這些。 Bootstrap模態框架最令人興奮的是什麼？你不需要寫任何JavaScript程式碼就可以使用它！所有的程式碼和樣式都是由Bootstrap預先定義的。你所需要做的只是使用正確的標記和屬性來觸發它。

預設的模態框

預設的模態框如下所示：

要觸發模態框，你需要加入連結或者按鈕。觸發元素的標記可能如下所示：

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

請注意，link元素有兩個自訂資料屬性：data-toggle和data-target。 toggle告訴Bootstrap要做什麼，target告訴Bootstrap要打開哪個元素。所以每當點擊這樣的連結時，都會出現一個id為「basicModal」的模態框。

現在讓我們看看定義模態框所需的程式碼：

<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>
            <h4 id="Modal-nbsp-title">Modal title</h4>
            </div>
            <div class="modal-body">
                <h3 id="Modal-nbsp-Body">Modal Body</h3>
            </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>

模態框的父div應具有與上述觸發元素中使用的相同的ID。在我們的例子中是id="basicModal"。

注意：父模態框元素中自訂屬性aria-labelledby和aria-hidden讓其可被存取。讓所有人都能訪問你的網站是一個很好的做法，所以你應該使用這些屬性，因為它們不會對模態框的普通功能產生負面影響。

在模態框的HTML程式碼中，我們可以看到一個封裝div嵌套在父模態框div內。這個div的類別modal-content告訴bootstrap.js在哪裡找模態框的內容。在這個div內，我們需要放置前面提到的三個部分：頭部，正文和頁腳。

模態框頭部，顧名思義，用於為模態添加一個標題或如“x”關閉按鈕等其他元素。這些元素也應該有一個data-dismiss屬性告訴Bootstrap哪個元素要隱藏。

然後我們看一下模態框的正文。可以把它看做一個打開的畫布，你可以在其中添加任何類型的數據，包括嵌入YouTube視頻，圖像或任何其他內容。

最後，我們看一下模態框的頁腳。該區域預設為右對齊。在這個區域，你可以放置“保存”，“關閉”，“接受”等操作按鈕，這些按鈕與“模態框”需要表現的行為相關聯。

改變模態框的大小

之前我提到Bootstrap模態框是響應式的、靈活的。我們將在本節中看到如何更改其大小。

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

使用jQuery啟動模態框

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

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

這裡的「options」是可以傳遞給自訂行為的JavaScript物件。例如：

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

可用的option包括：

• backdrop：这可以是true或static。这定义你是否希望用户能够通过单击背景来关闭模态。
• keyboard：如果设置为true则模态框将通过ESC键关闭。
• show：用于打开和关闭模态框。它可以是true或false。
• remote：这是最炫酷的选择之一。它可以用于使用jQuery的load()方法加载远程内容。你需要在此选项中指定外部页面。默认设置为false。

Bootstrap模态框的事件

你可以通过使用在打开和关闭模态框时触发的各种事件来进一步自定义Bootstrap模态的普通行为。这些事件必须使用jQuery的.on()方法绑定。

可用的事件有：

• show.bs.modal：在模态框打开之前被触发。
• shown.bs.modal：在显示模态框后触发。
• hide.bs.modal：在模态框被隐藏之前触发。
• hidden.bs.modal：在模态关闭后触发。
• loaded.bs.modal：使用上述的remote选项在远程内容成功加载到模态框的内容区域时触发。

你可以像这样使用上述之一的事件：

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

在模态框中加载远程内容

在Bootstrap模式中加载远程内容有三种不同的方法。

第一种方法，如上所述,是使用对象options中的remote选项。其他两种方式都是没有JavaScript的，如下所示。

你可以为模态框的触发元素中的href属性提供一个值。在我们的例子中，触发器是一个链接。例如，我们可以不使用我们之前提到的值#而将URL包含在特定页面中：

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

你还可以为触发元素提供data-remote的自定义数据属性，而不是使用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 3提供的最好的插件之一。对于初级设计师来说，它是不需要任何JavaScript代码而在弹出式画面中加载内容的最佳方式之一。

更多关于bootstrap的相关知识，可访问：bootstrap基础教程！！

以上是Bootstrap學習之淺析模態框的使用方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！