整理关于Bootstrap模态弹出框的慕课笔记(2)

<button data-toggle="modal" data-target=".bs-example-modal-sm"> 小的模态弹出窗 </button><div tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true"> <div> <div> <div> <button type="button" data-dismiss="modal"><span aria-hidden="true">&times;</span><span>Close</span></button> <h4>模态弹出窗标题</h4> </div> <div> <p>模态弹出窗主体内容</p> </div> <div> <button type="button" data-dismiss="modal">关闭</button> <button type="button">保存</button> </div> </div> </div> </div>

模态弹出窗的使用（data-参数说明）

除了通过data-toggle和data-target来控制模态弹出窗之外，Bootstrap框架针对模态弹出框还提供了其他自定义data-属性，来控制模态弹出窗。比如说:是否有灰色背景modal-backdrop，是否可以按ESC键关闭模态弹出窗。有关于Modal弹出窗自定义属性相关说明如下所示：

使用（JavaScript触发）

除了使用自定义属性触发模态弹出框之外，还可以通过JavaScript方法来触发模态弹出窗。通过给一个元素一个事件，来触发。比如说给一个按钮一个单击事件，然后触发模态弹出窗。如下面的一个简单示例：

<!-- 触发模态弹出窗元素 --> <button type="button">点击我</button> <!-- 模态弹出窗内容 --> <div> <div> <div> <div> <button type="button" data-dismiss="modal"><span aria-hidden="true">&times;</span><span>Close</span></button> <h4>模态弹出窗标题</h4> </div> <div> <p>模态弹出窗主体内容</p> </div> <div> <button type="button" data-dismiss="modal">关闭</button> <button type="button">保存</button> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div><!-- /.modal -->

JavaScript触发的弹出窗代码：

$(function(){ $(".btn").click(function(){ $("#mymodal").modal(); }); });

设置参数

使用JavaScript触发模态弹出窗时，Bootstrap框架提供了一些设置，主要包括属性设置、参数设置和事件设置。

属性设置

模态弹出窗默认支持的自定义属性主要有：

比如你不想让用户按ESC键关闭模态弹出窗，你就可以这样做：

$(function(){ $(".btn").click(function(){ $("#mymodal").modal({ keyboard:false }); }); });

参数设置

在Bootstrap框架中还为模态弹出窗提供了三种参数设置，具体说明如下：

事件设置

模态弹出窗还支持四种类型的事件，分别是模态弹出窗的弹出前、弹出后，关闭前、关闭后，具体描述如下：

调用方法也非常简单：

$('#myModal').on('hidden.bs.modal', function (e) { // 处理代码... })