Bootstrap模态框简单使用

项目中遇到，记录一下。

引入bootstrap的js和css就可以，官网有就不写了

HTML

<div class="modal fade" id="my_modal" tabindex="-1"role="dialog" aria-labelledby="myModalLabel1" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal"
					aria-hidden="true">&times;</button>
				<h4 class="modal-title">标题</h4>
			</div>
			<div class="modal-body">
				<form class="form-horizontal">
					<div class="box-body">
						//需要显示的东西写在这里面
					</div>
				</form>
			</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>

打开模态框

$("#my_modal").modal();
$("#my_modal").modal('show');//这两种方法都可以

隐藏模态框

$("#my_modal") .modal('hide');

在调用 show 方法后触发。

$('#my_modal').on('show.bs.modal', function () {
  // 执行一些动作...
})

在调用 hide 方法时触发。

$('#my_modal').on('hide.bs.modal', function () {
  // 执行一些动作...
})

在调用 hide 方法后触发。(完全隐藏后) 上面方法和这个差不多只是顺序区别

$('#my_modal').on('hidden.bs.modal', function () {
  // 执行一些动作...
})

在第一层模态框中展示的列表信息，点击查看之后弹出详细信息或新增，这时候需要弹出第二层模态框。问题就来了，当第二层模态框关闭之后（就是上面那层），下面的第一层模态框因为数据项太多，需要滚动下拉，但是实际情况是，如果不做处理的话，这时候滚动下拉的就是父页面了。因为body的class属性本来是空的或css的样式，打开一个模态框后class会改为modal-open，打开第二层模态框时还是modal-open，但是关了第二层之后class属性就不是modal-open了，所以对body来说他现在是没有打开模态框的，所以把body的class属性改为modal-open就可以了

在第二层模态框隐藏时加上如下js代码：

$('#第二层模态框ID').on('hidden.bs.modal', function () {
	      document.getElementsByTagName('body')[0].className = 'modal-open';
	});

注意其中用 = 号就是把父页面的body的class替换掉了，因为用 += 追加的话如果不刷新整体页面就会导致body的class中有很多modal-open，从而导致没有效果。