BootStrap-CSS樣式_外掛_模態框外掛
阿新 • • 發佈：2019-01-01
模態框（Modal）外掛
模態框（Modal）是覆蓋在父窗體上的子窗體。通常，目的是顯示來自一個單獨的源的內容， 可以在不離開父窗體的情況下有一些互動。子窗體可提供資訊、互動等。
提示：如果您想要單獨引用該外掛的功能，那麼您需要引用 modal.js。或者，正如 Bootstrap 外掛概覽 一章中 所提到，您可以引用 bootstrap.js 或壓縮版的 bootstrap.min.js。
用法
您可以切換模態框（Modal）外掛的隱藏內容：
1. 通過 data 屬性：在控制器元素（比如按鈕或者連結）上設定屬性 data-toggle="modal"， 同時設定 data-target="#identifier" 或 href="#identifier" 來指定要切換的特定的模態框（帶 有 id="identifier"）。
2.通過 JavaScript：使用這種技術，您可以通過簡單的一行 JavaScript 來呼叫帶有 id="identifier" 的模態框：
$('#identifier').modal(options) 選項
有一些選項可以用來定製模態視窗（Modal Window）的外觀和感觀，它們是通過 data 屬性或 JavaScript 來傳遞的。下表列出了這些選項：
下面是一些可JS與 modal() 一起使用的有用的方法
程式碼例項
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>模態框</title> <!-- Bootstrap --> <link rel="stylesheet" href="../css/bootstrap.min.css"> <script src="../js/jquery-1.11.1.min.js"></script> <script src="../js/bootstrap.min.js"></script> </head> <body> <h2>建立模態框（Modal）</h2> <!-- 按鈕觸發模態框 data-toggle屬性：標記modal,點選切換到模態框(modal) data-target屬性：定位切換的模態框，目標為id="myModal" data-dismiss屬性：關閉模態框 data-backdrop屬性：true點選模態框外部自動關閉，false點選模態框外部必須有data-dismiss屬性才能關閉 --> <h3>按鈕觸發模態框</h3> <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" data-backdrop="false">靜態呼叫模態框</button> <button type="button" id="myButton" class="btn btn-primary btn-lg" >動態JS呼叫模態框</button> <!-- 超連結觸發模態框 href屬性：錨點定位模態框#myModal data-remote屬性：依賴注入，內部填寫HTML介面，模態框modal-content顯示指定介面 --> <h3>超連結觸發模態框</h3> <a type="button" class="btn btn-primary btn-lg" data-toggle="modal" href="#mylinkModal" data-remote="test.html" >超連結遠端載入調模態框modal-content內容</a> <a type="button" id="mylink" class="btn btn-primary btn-lg" >超連結動態遠端載入JS呼叫模態框modal-content內容</a> <!-- 模態框（Modal） .modal: .fade:過渡外掛的淡出效果 #myModal:定位標記 .modal-header：設定頭部塊 .modal-body：設定內容塊 .modal-footer：設定尾部塊 .modal-title：設定標題，一般使用在<h*>標籤中 data-dismiss="modal"：關閉模態框 --> <div class="modal fade" id="myModal"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button class="close" data-dismiss="modal" type="button">×</button> <h4 class="modal-title">模態框標題</h4> </div> <div class="modal-body"> 如果您仔細檢視上面的程式碼，您會發現在標籤中，是您想要在頁面上載入的模態框的目標。您可以在頁面上建立多個模態框，然後為每個模態框建立不同的觸發器。現在，很明顯，您不能在同一時間載入多個模組，但您可以在頁面上建立多個在不同時間進行載入。 </div> <div class="modal-footer"> <button type="button" data-dismiss="modal" class="btn btn-default">關閉</button> <button type="button" class="btn btn-primary">提交</button> </div> </div> </div> </div> <div class="modal fade" id="mylinkModal"> <div class="modal-dialog"> <div class="modal-content"> <h3>模態框外掛頁面</h3> <!-- <div class="modal-header"> <button class="close" data-dismiss="modal" type="button">×</button> <h4 class="modal-title">模態框標題</h4> </div> <div class="modal-body"> 如果您仔細檢視上面的程式碼，您會發現在標籤中，是您想要在頁面上載入的模態框的目標。您可以在頁面上建立多個模態框，然後為每個模態框建立不同的觸發器。現在，很明顯，您不能在同一時間載入多個模組，但您可以在頁面上建立多個在不同時間進行載入。 </div> <div class="modal-footer"> <button type="button" data-dismiss="modal" class="btn btn-default">關閉</button> <button type="button" class="btn btn-primary">提交</button> </div> --> </div> </div> </div> <script> $(function(){ //按鈕呼叫模態框JS $("#myButton").click(function(){ $("#myModal").modal({backdrop:false,keyboard:false}); }); //連結呼叫模態框JS $("#mylink").click(function(){ $("#mylinkModal").modal({backdrop:true,keyboard:false,remote:"test.html"}); }); //關閉模態框JS $("#btnClose").click( function(){ $("#myModal").modal("hide"); } ); //模態框顯示之前執行的JS事件 $("#myModal").on("show.bs.modal", function(){ console.log("show.bs.modal") } ); //模態框顯示之後執行的JS事件 $("#myModal").on("shown.bs.modal", function(){ console.log("shown.bs.modal") } ); //模態框隱藏之前執行的JS事件 $("#myModal").on("hide.bs.modal", function(){ console.log("hide.bs.modal") } ); //模態框隱藏之後執行的JS事件 $("#myModal").on("hidden.bs.modal", function(){ console.log("hidden.bs.modal") } ); }) </script> </body> </html> 依賴注入：超連結(<a>)data-remote屬性遠端呼叫test.html程式碼 <div class="modal-header"> <button class="close" data-dismiss="modal" type="button">×</button> <h4 class="modal-title">test頁面模態框標題</h4> </div> <div class="modal-body"> <h5>這是test頁面內容</h5> 如果您仔細檢視上面的程式碼，您會發現在標籤中，是您想要在頁面上載入的模態框的目標。您可以在頁面上建立多個模態框，然後為每個模態框建立不同的觸發器。現在，很明顯，您不能在同一時間載入多個模組，但您可以在頁面上建立多個在不同時間進行載入。 </div> <div class="modal-footer"> <button type="button" data-dismiss="modal" class="btn btn-default">關閉</button> <button type="button" class="btn btn-primary">提交</button> </div>
button呼叫效果：
超連結<a>呼叫效果：
