Bootstrap模態對話框的簡單使用_javascript技巧

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

如果您想要單獨引用該外掛程式的功能，那麼您需要引用 modal.js。或者，如 Bootstrap 外掛程式概覽 一章所提到，您可以引用 bootstrap.js 或壓縮版的 bootstrap.min.js。
1、用法
您可以切換模態框（Modal）插件的隱藏內容：
透過data 屬性：在控制器元素（如按鈕或連結）上設定屬性data-toggle="modal"，同時設定data-target="#identifier" 或href="#identifier" 來指定要切換的特定的模態框（附id="identifier"）。
透過 JavaScript：使用這種技術，您可以透過簡單的一行 JavaScript 來呼叫帶有 id="identifier" 的模態框：
$('#identifier').modal(options)
2、簡單實例

div id="myModal" class="modal hide fade">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">x</button>
<h3>对话框标题</h3>
</div>
<div class="modal-body">
<p>对话框主体</p>
</div>
<div class="modal-footer">
<a href="#" class="btn" data-dismiss="modal">取消</a>
<a href="#" class="btn btn-primary" data-dismiss="modal">确定</a>
</div>
</div>

可以使用按鈕或連結直接呼叫模態對話框，這是簡單的用法：

複製程式碼 程式碼如下:

合約加

另外,當你需要讓對話框能夠在每次開啟時表單資料清空,如下:

複製程式碼 程式碼如下:

$('#modal1').modal('hide');
$("#modal1").on("hidden", function() {$('#form1')[0].reset();}); //加入合約後,清空表單操作

以上就是本文的全部內容，希望對大家的學習有所幫助。