bootstrap – 彈出層

彈出層包括模態對話方塊、提示條、popover、alert。它們都可以用來提示或者警告使用者，或者顯示詳細資訊。

模態對話方塊

模態對話方塊就是一個對話方塊，它在繼續下一步工作前來提示重要資訊給使用者，並可能會要求使用者做出不同操作的選擇。

如下程式碼可以點選一個按鈕，彈出模態對話方塊：

<a class="btn btn-large btn-primary" data-toggle="modal" data-target="#myModal">Launch</a>
<div id="myModal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">title1</h4>
            </div>
            <div class="modal-body">
                <p>Body1</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary">OK</button>
            </div>
        </div>
    </div>
</div>

模態對話方塊的DOM結構巢狀的有點深。使用類來表達這個層次，看起來是這樣的：

-.modal
--.modal-content
----.modal-header
----.modal-body
----.modal-footer

就是說，一個模態對話方塊內部有header、body、footer構成。可以使用data屬性來做模態對話方塊的彈出和關閉。第一行程式碼中的data-toggle=”modal”表示做模態切換，data-target=”#myModal”表示切換的目標為id等於myModal的元素。另外應該說明的是這行程式碼：

<button type="button" class="close" data-dismiss="modal">&times;</button>

其中的內容×表示的就是乘號（✖️），常常用來做關閉按鈕的圖示。類似的這個按鈕也使用了data屬性（data-dismiss=”modal”）做模態關閉。

tooltip

當滑鼠移動到a標籤上，預設會顯示一個提示條，內容為title指定的：

<a href="#" title="tooltip">foo</a>

想要這個提示條酷一點的話，可以加入兩個data屬性：

<a href="#" data-toggle="tooltip" data-placement="right" title="tooltip">foo</a>

並且加入JavaScript程式碼：

$(document).ready(function(){
    $(`[data-toggle="tooltip"]`).tooltip();   
});

屬性data-placement只是提示條的位置，可以是“top | bottom | left | right | auto”。我們再次看到data-toggle，這裡是切換tooltip的顯示。

一個看起來比較符合bootstrap風味的提示條就出來了。

popover

用來顯示當前元素的補充資訊。和提示條（tooltip）只能有內容相比，前者顯示資訊可以由頁頭和主體。程式碼如下：

 <button type="button" class="btn btn-primary" data-toggle="popover" title="title" data-content="content">Popover</button>

並且需要加入JavaScript程式碼，用來啟動popover，並設定它的顯示位置：

$(document).ready(function(){
    $(`[data-toggle="popover"]`).popover({
        placement : `right`
    });
});

你需要為當前元素加入屬性data-toggle=”popover”表示做popover切換，title=”title”放入popover的標題，data-content=”content”放入popover的內容。

alert

用來彈出需要使用者立刻注意到，如警告和確認類的資訊。比如：

<div class="alert alert-warning">
    <a href="#" class="close" data-dismiss="alert">&times;</a>
    <strong>Warning!</strong> There was a problem with your network connection.
</div>

這是一個alert，型別為alert-warning，因此是一個警告型的alert。相應的，還可以選擇alert-danger、alert-info、alert-success等型別。

程式碼：

<a href="#" class="close" data-dismiss="alert">&times;</a>

提供了一個關閉按鈕，它的data-dismiss=”alert”屬性表明，點選之可以關閉alert。