项目中遇到,记录一下。
引入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">×</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,从而导致没有效果。