站長資訊網
在bootstrap中，modal指的是“模態框”，是覆蓋在父窗體上的子窗體；其目的是顯示來自一個單獨的源的內容，可以在不離開父窗體的情況下有一些互動。模態框可為網站添加醒目的提示和交互，用于通知用戶、訪客交互、消息警示或自定義的內容交互。
本教程操作環境：Windows7系統、bootsrap3.3.7版、DELL G3電腦
模態框（Modal）是覆蓋在父窗體上的子窗體。通常，目的是顯示來自一個單獨的源的內容，可以在不離開父窗體的情況下有一些互動。子窗體可提供信息、交互等。
Bootstrap彈出模態框樣式
使用Bootstrap的JavaScript模態框插件可以為您的網站添加醒目的提示和交互，用于通知用戶、訪客交互、消息警示或自定義的內容交互。
關閉模態框：
-
點擊右上角的x
-
點擊右下角的關閉按鈕
-
點擊遮罩層
運行原理
-
彈出模態框是用HTML、CSS和Javascript構建的，它們位于文檔中其它表現元素之上，并從<body>中刪除滾動事件，以便模態框自身的內容能得到滾動。
-
點擊模態框的“backdrop”（灰背景區域），將自動關閉動態模塊框。
-
Bootstrap一次只支持一個模態窗口，不支持嵌套模式，因為那樣疊加會造成用戶體驗不佳。
-
模態框使用 position: fixed，在呈現上與其它元素相比有很大不同。請盡可能將彈出模態框的HTML放在頂級位置，以避免其它元素干擾，尤其是當另一個固定元素中也定義了 .modal 事件時，你可能會遇到問題。
-
同樣是受position: fixed屬性影響，在在移動設備上使用模態框，有一些注意事項。
-
根據HTML5的語義定義，autofocusHTML 屬性對 Bootstrap 模態框沒有影響，要達到同樣的效果，需要使用一些JavaScript。
普通模態框
-
.modal：模態框的最外層容器。
-
.modal-dialog：模態框的容器。
-
.modal-content：放置模態框的內容，設置模態框樣式。
-
.modal-header：模態框頭部。
-
.modal-title：模態框標題。
-
.modal-body：模態框主體內容。
-
.modal-footer：模態框頁腳內容。
<div class="modal fade" id="modal1"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">標題</h5> <button class="close" data-dismiss="modal"> <span>×</span> </button> </div> <div class="modal-body"> ur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla. </div> <div class="modal-footer"> <button class="btn btn-secondary" data-dismiss="modal">關閉</button> <button class="btn btn-primary">保存</button> </div> </div> </div> </div> <div class="container"> <div class="row mt-5"> <div class="col"> <button class="btn btn-primary" data-toggle="modal" data-target="#modal1">普通的模態框</button> </div> </div> </div>
有滾動條的模態框
當用戶viewport 視口（彈出內容區）或設備的模態變得較長時，它們會自動滾動頁面。
<div class="modal fade" id="modal1"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">標題</h5> <button class="close" data-dismiss="modal"> <span>×</span> </button> </div> <div class="modal-body"> <p>ur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p> <p>ur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p> <p>ur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p> <p>ur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p> <p>ur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p> <p>ur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p> <p>ur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p> <p>ur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p> <p>ur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p> <p>ur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p> <p>ur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p> <p>ur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p> <p>ur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p> <p>ur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p> <p>ur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p> <p>ur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p> <p>ur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p> <p>ur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p> <p>ur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p> <p>ur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p> <p>ur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p> <p>ur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p> <p>ur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p> <p>ur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p> </div> <div class="modal-footer"> <button class="btn btn-secondary" data-dismiss="modal">關閉</button> <button class="btn btn-primary">保存</button> </div> </div> </div> </div> <div class="container"> <div class="row mt-5"> <div class="col"> <button class="btn btn-primary" data-toggle="modal" data-target="#modal1">有滾動條的模態框</button> </div> </div> </div>
垂直居中的模態框
將.modal-dialog-centered添加到.modal-dialog對話框以垂直居中模式。
<!-- 垂直居中的模態框 --> <div class="modal fade" id="modal2"> <div class="modal-dialog modal-dialog-centered"> <!-- modal-dialog-centered這個class要加在這里 --> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">標題</h5> <button class="close" data-dismiss="modal"> <span>×</span> </button> </div> <div class="modal-body"> 垂直居中的模態框 </div> <div class="modal-footer"> <button class="btn btn-secondary" data-dismiss="modal">關閉</button> <button class="btn btn-primary">保存</button> </div> </div> </div> </div> <div class="container"> <div class="row mt-5"> <div class="col"> <button class="btn btn-secondary" data-toggle="modal" data-target="#modal2">垂直居中的模態框</button> </div> </div> </div>
包含柵格系統的模態框
在.modal-body中加入.container-fluid柵格系統，可以在動態視窗中使用Bootsrap柵格系統，并在任何地方使用正常的柵格系統class定義。
<!-- 使用柵格系統 --> <div class="modal fade" id="modal3"> <div class="modal-dialog modal-dialog-centered"> <!-- modal-dialog-centered這個class要加在這里 --> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">標題</h5> <button class="close" data-dismiss="modal"> <span>×</span> </button> </div> <div class="modal-body"> <div class="container-fluid"> <div class="row"> <div class="col-md-4 bg-info border">第1列</div> <div class="col-md-4 bg-info border">第2列</div> <div class="col-md-4 bg-info border">第3列</div> <div class="col-md-12 bg-info border">第4列</div> </div> <div class="row"> <div class="col bg-info border">第1列</div> <div class="col bg-info border">第2列</div> <div class="col bg-info border">第3列</div> <div class="col bg-info border">第4列</div> </div> <div class="row"> <div class="col-md-5 bg-info">第1列</div> <div class="col-md-4 bg-info ml-auto">第2列</div> </div> <div class="row mt-3"> <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-12 bg-info border">超大屏6個，大屏4個，中等屏3個，小屏2個，超小屏1個</div> <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-12 bg-info border">超大屏6個，大屏4個，中等屏3個，小屏2個，超小屏1個</div> <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-12 bg-info border">超大屏6個，大屏4個，中等屏3個，小屏2個，超小屏1個</div> <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-12 bg-info border">超大屏6個，大屏4個，中等屏3個，小屏2個，超小屏1個</div> <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-12 bg-info border">超大屏6個，大屏4個，中等屏3個，小屏2個，超小屏1個</div> <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-12 bg-info border">超大屏6個，大屏4個，中等屏3個，小屏2個，超小屏1個</div> </div> </div> </div> <div class="modal-footer"> <button class="btn btn-secondary" data-dismiss="modal">關閉</button> <button class="btn btn-primary">保存</button> </div> </div> </div> </div> <div class="container"> <div class="row mt-5"> <div class="col"> <button class="btn btn-danger" data-toggle="modal" data-target="#modal3">包含柵格系統的模態框</button> </div> </div> </div>
模態框的尺寸
在.modal-dialog中加入模態框尺寸。
| class | 描述 | Modal max-width |
|---|---|---|
| .modal-xl | 超大尺寸 | 1140px |
| .modal-lg | 大尺寸 | 800px |
| none(默認) | 默認尺寸 | 500px |
| .modal-sm | 小尺寸 | 300px |
<!-- 尺寸大小-超大尺寸 --> <div class="modal fade bd-example-modal-xl" id="modal5"> <!-- 這里添加.bd-example-modal-xl --> <div class="modal-dialog modal-xl"> <!-- 這里添加.modal-xl --> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">標題</h5> <button class="close" data-dismiss="modal"> <span>×</span> </button> </div> <div class="modal-body"> 超大尺寸模態框 </div> <div class="modal-footer"> <button class="btn btn-secondary" data-dismiss="modal">關閉</button> <button class="btn btn-primary">保存</button> </div> </div> </div> </div> <!-- 尺寸大小-大尺寸 --> <div class="modal fade bd-example-modal-lg" id="modal6"> <!-- 這里添加.bd-example-modal-lg --> <div class="modal-dialog modal-lg"> <!-- 這里添加.modal-lg --> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">標題</h5> <button class="close" data-dismiss="modal"> <span>×</span> </button> </div> <div class="modal-body"> 大尺寸模態框 </div> <div class="modal-footer"> <button class="btn btn-secondary" data-dismiss="modal">關閉</button> <button class="btn btn-primary">保存</button> </div> </div> </div> </div> <!-- 尺寸大小-小尺寸 --> <div class="modal fade bd-example-modal-sm" id="modal7"> <!-- 這里添加.bd-example-modal-sm --> <div class="modal-dialog modal-sm"> <!-- 這里添加.modal-sm --> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">標題</h5> <button class="close" data-dismiss="modal"> <span>×</span> </button> </div> <div class="modal-body"> 小尺寸模態框 </div> <div class="modal-footer"> <button class="btn btn-secondary" data-dismiss="modal">關閉</button> <button class="btn btn-primary">保存</button> </div> </div> </div> </div> <div class="container"> <div class="row mt-5"> <div class="col"> <button class="btn btn-info" data-toggle="modal" data-target="#modal5">超大尺寸模態框</button> <button class="btn btn-info" data-toggle="modal" data-target="#modal6">大尺寸模態框</button> <button class="btn btn-info" data-toggle="modal" data-target="#modal7">小尺寸模態框</button> </div> </div> </div>
使用數據屬性
data屬性，需要添加在button身上。
-
data-backdrop 是否顯示遮罩層
-
data-keyboard 按esc是否關閉模態框
-
data-focus 讓模態框獲取到焦點
-
data-show 初始化時模態框是否顯示
<!-- data屬性 --> <div class="modal fade" id="modal8"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">標題</h5> <button class="close" data-dismiss="modal"> <span>×</span> </button> </div> <div class="modal-body"> data屬性 </div> <div class="modal-footer"> <button class="btn btn-secondary" data-dismiss="modal">關閉</button> <button class="btn btn-primary">保存</button> </div> </div> </div> </div> <div class="container"> <div class="row mt-5"> <div class="col"> <button class="btn btn-dark" data-toggle="modal" data-target="#modal8" data-backdrop="true" data-keyboard="false" data-focus="true" data-show="false">data屬性</button> </div> </div> </div>
JavaScript方法事件
方法：
-
.modal(options)：激活您的內容作為模態，將選項加入到object內。
-
.modal('toggle')：手動切換動態模態框，在動態模態框實際顯示或隱藏之前返回給調用者（即在shown.bs.modal或hidden.bs.modal事件發生之前)。
-
.modal('show')：手動打開動態模態框，在動態模態框實際顯示之前返回給調用者（即在shown.bs.modal事件發生前)。
-
.modal('hide')：手動隱藏動態模態框，在動態模態框實際隱藏之前返回給調用者（即在hidden.bs.modal事件發生前)。
事件：
-
show.bs.modal：
當調用show實例方法時，會立即觸發該事件。如果是由點擊引起的，被點擊的元素是可用的，成為Event對象的relatedTarget屬性。
-
shown.bs.modal：="normal" data-row-style="normal">
當模態框對用戶來說可見時（需要等待CSS過渡完成），會觸發該事件。如果是由點擊引起的，被點擊的元素是可用的，成為Event對象的relatedTarget屬性。
-
hide.bs.modal：當調用hide實例方法時，會立即觸發該事件。
-
hidden.bs.modal：
當模態框對用戶來說終于完成隱藏時（需要等待CSS過渡完成），會觸發該事件。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <title>Bootstrap彈出模態框樣式</title> </head> <body> <!-- 方法與事件 --> <div class="modal fade" id="myModal"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">標題</h5> <button class="close" data-dismiss="modal"> <span>×</span> </button> </div> <div class="modal-body"> data屬性 </div> <div class="modal-footer"> <button class="btn btn-secondary" data-dismiss="modal">關閉</button> <button class="btn btn-primary">保存</button> </div> </div> </div> </div> <div class="container"> <div class="row mt-5"> <div class="col"> <button class="btn btn-warning" id="myBtn">方法與事件</button> </div> </div> </div> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> <script> //方法 $('#myBtn').click(function(){ $('#myModal').modal('show'); }); /* $('#myModal').modal('show'); setTimeout(function(){ $('#myModal').modal('hide'); },2000); */ //事件 $('#myModal').on('show.bs.modal', function (e) { console.log('顯示前'); }); $('#myModal').on('shown.bs.modal', function (e) { console.log('完全顯示了'); }); $('#myModal').on('hide.bs.modal', function (e) { console.log('隱藏前'); }); $('#myModal').on('hidden.bs.modal', function (e) { console.log('完全隱藏了'); }); </script> </body> </html>
推薦學習：《bootstrap使用教程》
