Bootstrap Modals（模態框）是使用定製的 Jquery 插件創建的。它可以用來創建模態窗口豐富用戶體驗，或者為用戶添加實用功能。您可以在 Modals（模態框）中使用 Popover（彈出框）和 Tooltip（工具提示插件）。
在本教程中，將通過一些實例和解釋來討論如何使用 Bootstrap 創建模態窗口。同時，我們也會討論用於定製的各種可用選項。
什麼是必需的您需要 Jquery、Bootstrap CSS 和 JavaScript 文件 bootstrap-modal.js。這個 js 文件位於您下載的 Bootstrap 主文件夾中的 js 文件夾內。
Jquery 位於您的 Bootstrap 主文件夾中的 docs > assets > js 下，名為 jquery.js。或者您可以直接訪問 https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js 下載 Jquery。
Bootstrap Modals（模態框）長什麼樣下面的實例演示了 Bootstrap Modals（模態框）長什麼樣。
在您的網站中使用 Bootstrap Modals（模態框）下面的實例演示了如何在網頁中使用 Bootstrap Modals（模態框）。請注意，您不需要編寫任何的 JavaScript 代碼。實例後面附有相關的解釋。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Twitter Bootstrap Modals Example</title>
<meta name="description" content="Creating Modal Window with Twitter Bootstrap">
<link href="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet">
</head>
<body>
<div>
<h2>Example of creating Modals with Twitter Bootstrap</h2>
<div id="example" style="display: none; ">
<div>
<a data-dismiss="modal">×</a>
<h3>This is a Modal Heading</h3>
</div>
<div>
<h4>Text in a modal</h4>
<p>You can add some text here.</p>
</div>
<div>
<a href="#">Call to action</a>
<a href="#" data-dismiss="modal">Close</a>
</div>
</div>
<p><a data-toggle="modal" href="#example">Launch demo modal</a></p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="/twitter-bootstrap/twitter-bootstrap-v2/js/bootstrap-modal.js"></script>
</body>
</html>
在線查看 Bootstrap Modals（模態框）實例。
解釋下面的表格解釋了上面的代碼。它將幫助您理解如何使用 Bootstrap Modals（模態框）。
代碼解釋div id="example"分配給相關 div 的 id，id 的值指向後邊要實現 modal（模態框）的 JavaScript。class="modal hide fade in"Bootstrap CSS 的四個 class - modal、hide、fade 和 in，用於設置 modal（模態框）的布局。style="display: none;用於保持模態窗口可見，直到觸發器觸發（比如點擊相關按鈕）。<div>modal-header 適用於定義模態窗口標題樣式的 class。aCSS class close 用於設置模態窗口關閉按鈕的樣式。data-dismiss="modal"data-dismiss 是一個定製的 HTML5 data 屬性。用於關閉模態窗口。class="modal-body"modal-body 是 Bootstrap 的一個 CSS class，用於設置模態窗口主體的樣式。class="modal-footer"modal-footer 是 Bootstrap 的一個 CSS class，用於設置模態窗口尾部的樣式。class="btn btn-success"CSS class btn 和 btn-success 用於在模態窗口的尾部創建一個大號的按鈕。您可以使用任何其他 Bootstrap 按鈕代替。class="btn"Bootstrap CSS 的 按鈕 class btn，用於在模態窗口的尾部創建一個小號的按鈕。data-dismiss="modal"HTML5 定製的 data 屬性 data-dismiss，用於關閉模態窗口。data-toggle="modal"HTML5 定製的 data 屬性 data-toggle，用於打開模態窗口。class="btn btn-primary btn-large"設置按鈕樣式，點擊該按鈕則創建模態窗口。<script src="https://ajax.googleapis.com/ajax/libs
/jquery/1.7.1/jquery.min.js"></script>引用 Jquery 文件。<script src="../bootstrap/twitter-bootstrap-v2>
/js/bootstrap-modal.js"></script>引用 bootstrap modal（模態框）的 JS 文件。