Bootstrap 模态弹窗

模态弹窗（Modal）是绝大部分交互式网都需要的一种功能，一般有一下几种用法：

1、提示信息、警告信息、大文本等。

2、确认提示（多按钮）；

3、显示表单元素（一般使用ajax操作等功能）；

4、其他需要特使显示的信息（如单击缩略图时放大图片）

一、基本用法

代码结构如下：

<button data-toggle="modal" data-target="#myModal" class="btn btn-primary">click me</button>
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Modal标题</h4>
</div>
<div class="modal-body">
<p>这里是弹窗的具体内容。。。</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary">保存</button>
</div>
</div>
</div>
</div>

首先，那个按钮用于触发弹窗，弹窗部分有三层div嵌套而成，真正的内容容器（modal-content）内又包含了弹窗的头、内容、底部。

底部区域一般都是放置各种按钮

注意：

1、触发元素中，data-toggle和data-target属性是必须的（a元素也可为触发元素，此时可以用href属性代替data-target，当然，button中只能用data-targe了，因为其没有href属性啦）。

2、在进行声明定义时，该组件还支持默认的参数选项，如，是否有灰色背景罩、按Esc键时是否关闭弹窗等。如下图为modal插件的声明式选项：



上述属性，除了href外，其他3个data-开头的属性，一般情况下可以设置在触发元素（带有[data-toggle=“modal”]属性的元素）上，也可以设置在弹窗最外层的div元素上，但是一般设置在触发元素上。

二、Modal组件的JavaScript用法：

$(‘#myModal’).modal({
backdrop: true,
keyboard: false
})

其他的属性：



参数：



事件：