最近專案中用到了Bootstrap模態框，收錄下來：

一、引用的檔案

前提是需要引用jquery哦：

<script src="plugins/bootstrap-modal/js/bootstrap-modal.js" type="text/javascript"></script>

二、舉例樣式

三、html引用規則

 <div class="modal fade" id="dia_delay" tabindex="-1" aria-hidden="true" data-width="700px">
<div class="modal-title black">
    <span><spring:message code="system.tenantManage.delay" /></span>
        <span class="modal-close"

><i class="fa fa-times-circle-o" data-dismiss="modal" aria-hidden="true"></i></span>
    </div>
    <div class="modal-body">  
    <div class="scroller" style="height:100px" data-always-visible="1" data-rail-visible1="1">        
             <table class="table tableDiv">
             <thead>
             <tr>
              <th><spring:message code="system.tenantManage.name" /></th>
              <th><spring:message code="system.tenantManage.contact" /></th>
              <th><spring:message code="system.tenantManage.serviceContent" /></th>
              <th><spring:message code="system.tenantManage.duetime" /></th>
             </tr>
             </thead>
             <tbody>
             <tr>
             <td class="name"></td>
             <td class="email"></td>
             <td class="catalognum"></td>
             <td class="duetime"></td>
             </tr>
             </tbody>
             </table>
             <div class="delayDiv">
<label class="control-label"><spring:message code="system.tenantManage.duetimeTo" />： 
</label>
<div class="">
<div class="input-group input-medium date date-picker" data-date-format="yyyy-mm-dd" data-date-start-date="+0d">
<input type="text" class="form-control inputWidth" name="dueTime">
<span class="input-group-btn">
<button class="btn default dateBtn" type="button"><i class="fa fa-calendar"></i></button>
</span>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn red" data-dismiss="modal" aria-hidden="true" onclick="changeDueTime()"><spring:message code="common.confirm"/></button>
    <button class="btn white" data-dismiss="modal" aria-hidden="true"><spring:message code="common.cancel"/></button>
    </div>
</div>

解釋

程式碼	解釋
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 class="modal-header">	modal-header 適用於定義模態視窗標題樣式的 class。
a class="close"	CSS 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 檔案。

註釋：實際中不同的模態框的長寬是不一樣的，在class="modal"的div中設定data-width/data-heigth是整個模態框的。而內容對應顯示時要對應設定class="modal-body"的heigth值。

四、js操作

如果設定了modal的display:none.那麼起初是看不到該模態框的。

使用

$("#dia_delay").modal('show'); 來開啟模態框。

五、對於模態框的按鈕監

不同的按鈕可以設定監聽事件好了