Bootstrap 模態框（Modal）插件

　　模態框（Modal）是覆蓋在父窗體上的子窗體。通常，目的是顯示來自一個單獨的源的內容，可以在不離開父窗體的情況下有一些互動。子窗體可提供信息、交互等。

　　（1）提供信息、警告信息、大文本；

　　（2）確認按鈕（多按鈕）；

　　（3）顯示表單元素；（一般用Ajax操作等功能）

　　（4）其他需要特殊顯示的信息（如單擊縮略圖時放大圖片）；

 1 <div class="modal show">
 2         <div class="modal-dialog">
 3             <div class="modal-content">
 4                 <div class="modal-header">
 5                     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
 6                     <h4 class="modal-title">標題</h4>
 7                 </div>
 8                 <div class="modal-body">
 9                     <p>這里是彈窗的具體內容......&hellip;</p>
10                 </div>
11                 <div class="modal-footer">
12                     <button type="button" class="btn btn-default" data-dismiss="modal">關閉</button>
13                     <button type="button" class="btn btn-primary">保存</button>
14                 </div>
15             </div>
16         </div>
17     </div>

　　這個是靜態的頁面，直接顯示在屏幕上；接下來，我們來看一下按鈕觸發模態框；

 1 　　 <h2>創建模態框</h2>
 2     <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">開始演示模態框</button>

 3     <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
 4         <div class="modal-dialog">
 5             <div class="modal-content">
 6                 <div class="modal-header">
 7                     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
 8                     <h4 class="modal-title">標題</h4>
 9                 </div>
10                 <div class="modal-body">
11                     <p>這里是彈窗的具體內容......&hellip;</p>
12                 </div>
13                 <div class="modal-footer">
14                     <button type="button" class="btn btn-default" data-dismiss="modal">關閉</button>
15                     <button type="button" class="btn btn-primary">保存</button>
16                 </div>
17             </div>
18         </div>
19     </div>

　　點擊按鈕則彈出模態框；

用法

您可以切換模態框（Modal）插件的隱藏內容：

　　通過 data 屬性：在控制器元素（比如按鈕或者鏈接）上設置屬性 data-toggle="modal"，同時設置 data-target="#identifier"（標識符） 或href="#identifier"（標識符） 來指定要切換的特定的模態框（帶有 id="identifier"）。

　　通過 JavaScript：使用這種技術，您可以通過簡單的一行 JavaScript 來調用帶有 id="identifier" 的模態框：

```
$('#identifier').modal(options)
```

二、代碼講解

　　1、使用模態窗口，需要有某種觸發器。我們可以使用按鈕或者鏈接。

　　2、觀看上面的代碼，我們發現在 <button> 標簽中，data-target="#myModal" 就是我們在頁面上加載的模態框的目標。我們可以在頁面上創建多個模態框，然后為每個模態框創建不同的觸發器。

 1 <body>
 2     <h2>創建模態框</h2>
 3     <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">開始演示模態框</button>
 4     <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
 5         <div class="modal-dialog">
 6             <div class="modal-content">
 7                 <div class="modal-header">
 8                     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
 9                     <h4 class="modal-title">標題</h4>
10                 </div>
11                 <div class="modal-body">
12                     <p>這里是彈窗的具體內容......&hellip;</p>
13                 </div>
14                 <div class="modal-footer">
15                     <button type="button" class="btn btn-default" data-dismiss="modal">關閉</button>
16                     <button type="button" class="btn btn-primary">保存</button>
17                 </div>
18             </div>
19         </div>
20     </div>
21 
22     <h2>創建多個模態框</h2>
23     <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal1">開始演示模態框</button>
24     <div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
25         <div class="modal-dialog">
26             <div class="modal-content">
27                 <div class="modal-header">
28                     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
29                     <h4 class="modal-title">標題1</h4>
30                 </div>
31                 <div class="modal-body">
32                     <p>這里是彈窗的具體內容......&hellip;</p>
33                 </div>
34                 <div class="modal-footer">
35                     <button type="button" class="btn btn-default" data-dismiss="modal">關閉</button>
36                     <button type="button" class="btn btn-primary">保存</button>
37                 </div>
38             </div>
39         </div>
40     </div>
41 </body>

在模態框中需要注意兩點：

在模態框中需要注意兩點：aria-labelledby="myModalLabel"，該屬性引用模態框的標題。
1. 第一是 .modal，用來把 <div> 的內容識別為模態框。
2. 第二是 .fade class。當模態框被切換時，它會引起內容淡入淡出。
屬性 aria-hidden="true" 用於保持模態窗口不可見，直到觸發器被觸發為止（比如點擊在相關的按鈕上）。
<div class="modal-header">，modal-header 是為模態窗口的頭部定義樣式的類。
class="close"，close 是一個 CSS class，用於為模態窗口的關閉按鈕設置樣式。
data-dismiss="modal"，是一個自定義的 HTML5 data 屬性。在這里它被用於關閉模態窗口。
class="modal-body"，是 Bootstrap CSS 的一個 CSS class，用於為模態窗口的主體設置樣式。
class="modal-footer"，是 Bootstrap CSS 的一個 CSS class，用於為模態窗口的底部設置樣式。
data-toggle="modal"，HTML5 自定義的 data 屬性 data-toggle 用於打開模態窗口。
aria-labelledby="myModalLabel"，該屬性引用模態框的標題。

選項

有一些選項可以用來定制模態窗口（Modal Window）的外觀和感觀，它們是通過 data 屬性或 JavaScript 來傳遞的。下表列出了這些選項：

選項名稱	類型/默認值	Data 屬性名稱	描述
backdrop	boolean 或 string 'static' 默認值：true	data-backdrop	指定一個靜態的背景，當用戶點擊模態框外部時不會關閉模態框。
keyboard	boolean 默認值：true	data-keyboard	當按下 escape 鍵時關閉模態框，設置為 false 時則按鍵無效。
show	boolean 默認值：true	data-show	當初始化時顯示模態框。
remote	path 默認值：false	data-remote	使用 jQuery .load 方法，為模態框的主體注入內容。如果添加了一個帶有有效 URL 的 href，則會加載其中的內容。如下面的實例所示： <a data-toggle="modal" href="remote.html" data-target="#modal">請點擊我</a>

方法

下面是一些可與 modal() 一起使用的有用的方法。

方法	描述	實例
Options: .modal(options)	把內容作為模態框激活。接受一個可選的選項對象。	$('#identifier').modal({ keyboard: false })
Toggle: .modal('toggle')	手動切換模態框。	$('#identifier').modal('toggle')
Show: .modal('show')	手動打開模態框。	$('#identifier').modal('show')
Hide: .modal('hide')	手動隱藏模態框。	$('#identifier').modal('hide')

    <h2>創建模態框</h2>
    <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">開始演示模態框</button>
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" 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 class="modal-title">標題</h4>
                </div>
                <div class="modal-body">
                    <p>這里是彈窗的具體內容......&hellip;</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">關閉</button>
                    <button type="button" class="btn btn-primary">保存</button>
                </div>
            </div>
        </div>
    </div>
    <script>
        $(function () {
            $('#myModal').modal({
            keyboard: true
        })});
    </script>

　　從以上代碼可知：當添加js調用代碼之后，打開頁面模態框就直接彈出來了，可以按鍵盤鍵Esc關閉彈出框；

事件

下表列出了模態框中要用到事件。這些事件可在函數中當鈎子使用。

事件	描述	實例
show.bs.modal	在調用 show 方法后觸發。	$('#identifier').on('show.bs.modal', function () { // 執行一些動作... })
shown.bs.modal	當模態框對用戶可見時觸發（將等待 CSS 過渡效果完成）。	$('#identifier').on('shown.bs.modal', function () { // 執行一些動作... })
hide.bs.modal	當調用 hide 實例方法時觸發。	$('#identifier').on('hide.bs.modal', function () { // 執行一些動作... })
hidden.bs.modal	當模態框完全對用戶隱藏時觸發。	$('#identifier').on('hidden.bs.modal', function () { // 執行一些動作... })

實例

<body>
    <h2>創建模態框</h2>
    <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">開始演示模態框</button>
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" 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 class="modal-title">標題</h4>
                </div>
                <div class="modal-body">
                    <p>這里是彈窗的具體內容......&hellip;</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">關閉</button>
                    <button type="button" class="btn btn-primary">保存</button>
                </div>
            </div>
        </div>
    </div>
    <script>
        $(function () {
            $('#myModal').modal('hide')
        });
    </script>
    <script>
        $(function () {
            $('#myModal').on('hide.bs.modal',function () {
                alert('hello!'); })
        });
    </script>
</body>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 js控制Bootstrap 模態框（Modal）插件 Bootstrap學習5--bootstrap中的模態框（modal，彈出層） Bootstrap 模態框（Modal）插件數據傳值 Bootstrap 模態框（Modal）帶參數傳值實例 Bootstrap模態框modal的高度和寬度設置 bootstrap中的模態框（modal，彈出層）重置 Bootstrap modal 模態框數據 Bootstrap模態框(modal)垂直居中 Bootstrap Blazor Modal 模態框組件 Bootstrap3.0學習第十七輪(JavaScript插件——模態框)