Bootstrap 模態框外掛
模態框外掛
模態框外掛是一個對話方塊/彈出視窗，顯示在當前頁面的頂部。
提示: 外掛可以單獨包含（使用 Bootstrap 的單個“modal.js”檔案），或者全部一起包含（使用“bootstrap.js”或“bootstrap.min.js”）。
如何建立模態框
以下示例展示瞭如何建立一個基本的模態框
示例
<!-- 使用按鈕觸發模態框 -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">開啟模態框</button>
<!-- 模態框 -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- 模態框內容-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">模態框標題</h4>
</div>
<div class="modal-body">
<p>模態框中的一些文字。</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">關閉</button>
</div>
</div>
</div>
</div>
自己動手試一試 »
示例解釋
“觸發器”部分
要觸發模態框視窗，您需要使用按鈕或連結。
然後包含這兩個 data-* 屬性
data-toggle="modal"開啟模態框視窗data-target="#myModal"指向模態框的 id
“模態框”部分
模態框的父級 <div> 必須有一個 ID，該 ID 與用於觸發模態框的 data-target 屬性值（“myModal”）相同。
類 .modal 標識 <div> 的內容為一個模態框，並將其置於焦點。
類 .fade 添加了淡入淡出模態框的過渡效果。如果您不想要此效果，請刪除此類。
屬性 role="dialog" 提高了使用螢幕閱讀器的人的可訪問性。
類 .modal-dialog 設定了模態框的正確寬度和邊距。
“模態框內容”部分
具有 class="modal-content" 的 <div> 用於樣式化模態框（邊框、背景顏色等）。在此 <div> 內部，新增模態框的標題、正文和頁尾。
類 .modal-header 用於定義模態框標題的樣式。標題內的 <button> 具有 data-dismiss="modal" 屬性，點選它可以關閉模態框。類 .close 用於樣式化關閉按鈕，而類 .modal-title 則用於樣式化標題，具有正確的行高。
類 .modal-body 用於定義模態框正文的樣式。可以在此處新增任何 HTML 標記；段落、影像、影片等。
類 .modal-footer 用於定義模態框頁尾的樣式。請注意，此區域預設右對齊。
模態框大小
透過新增 .modal-sm 類來建立小模態框，或新增 .modal-lg 類來建立大模態框，以更改模態框的大小。
將大小類新增到具有 .modal-dialog 類的 <div> 元素上
預設情況下，模態框大小為中等。
完整的 Bootstrap 模態框參考
有關所有模態框選項、方法和事件的完整參考，請訪問我們的 Bootstrap JS 模態框參考。
