最近项目中用到了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'); 来打开模态框。
五、对于模态框的按钮监
不同的按钮可以设置监听事件好了