Bootstrap 模态框（Modal）插件

模态框（Modal）是覆盖在父窗体上的子窗体。

一. 使用模态框必须要引入以下三个插件：

<link rel="stylesheet" href="bootstrap.min.css">
<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>

二. 通过 data 属性或 JavaScript 调用模态框插件，可以根据需要动态展示隐藏的内容。 要显示的模态框代码：

<!-- 模态声明-->
<div class="modal fade" id="mymodal" tabindex="-1">
	<!-- 窗口声明 -->
	<div class="modal-dialog">
		<!-- 内容声明 -->
		<div class="modal-content">
			<!-- 头部 -->
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
				<h3 class="modal-title" id="title">header-title</h3>
			</div>
			<!-- 主体 -->
			<div class="modal-body">
				<p>body</p>
				<form>
				<div class="form-group">
				<label for="input">message:</label>
				<input  class="form-control" id="input" type="text">
				</div>
				</form>
			</div>
			<!-- 注脚 -->
			<div class="modal-footer">
				<button type="button" class="btn btn-primary" data-dismiss="modal">close</button>
				<button type="button" class="btn btn-default">save</button>
			</div>
		</div><!-- .modal-content -->
	</div><!-- .modal-dialog -->
</div>

效果如下：


关键代码解释：

1. .modal类，用来把 <div>的内容识别为模态框，内容。
2. .fade类,当模态框被切换时，它会引起内容淡入淡出,不需要模态框弹出时的动画效果（淡入淡出效果），删掉 .fade 类即可。
3. tabindex="-1"，没有的话设置keyboard就不会起效果，键盘上的 esc 键被按下时就不会正常关闭模态框。
4. .modal-dialog类，用来窗口声明，不添加 .modal-dialog类模态框宽度会占全屏，有两个可选尺寸，在.modal-dialog类后添加modal-lg或者modal-sm，会分别显示大模态框和小模态框。
5. .modal-content类，用来内容声明，其中包括.modal-header，.modal-body，.modal-footer。不添加.modal-content类，显示的模态框会是透明的。
6. class=“close”，close 是一个 CSS class，用于为模态窗口的关闭按钮设置样式。
7. data-dismiss=“modal”，是一个自定义的 HTML5 data 属性。在这里它被用于关闭模态窗口。

1. 通过data属性调用模态框：

<button class="btn btn-default" type="button" data-toggle="modal" data-target="#mymodal">点击按钮触发模态框</button>

关键代码解释：

1. data-target="#mymodal" 是您想要在页面上加载的模态框的目标。
2. data-toggle=“modal”，HTML5 自定义的 data 属性 data-toggle 用于打开模态窗口。

除了 data-toggle 和 data-target 两个声明属性外，还有一些可以用选项，可以通过在 HTML 元素上设置 data-*的属性声明来控制效果：

 特别说明： data-show="false"//初始化隐藏，如果是按钮点击触发，第一次点击则无法显示，第二次显示。

2. 通过JavaScript调用模态框：

$('#mymodal').modal({
 show : true,
 backdrop : false,
 keyboard : false,
 remote : 'index.html'//服务器上的文件
}); 


---

三. 方法


$('#btn').on('click', function() {
 $('#myModal').modal('show');
}); 

四. 事件


基于上面模态框的例子：将按钮中data-*内容传递到

<button class="btn btn-default" type="button" data-toggle="modal" data-target="#mymodal" data-whatever="添加的内容">点击按钮触发模态框</button>


<script>
$('#mymodal').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget) // Button that triggered the modal
  var content = button.data('whatever') // Extract info from data-* attributes
  // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
  // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
  var modal = $(this)
  modal.find('#title').text('Content received' + content)
  modal.find('#input').val(content)
})
</script>

效果图：