版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/document_dom/article/details/88577541
模态框的使用模板
新建aaa.html
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" style="width: 100%">
<div class="modal-content" style="width: 1200px;margin: 0 auto;">
<div class="modal-header">
<button type="button" class="close" style="font-size: 43px;margin-right: 20px;font-weight: 100;color: red;opacity: 1"
data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" style="text-align: left;line-height: 42px;padding-left: 30px">
<span style="display:inline-block;width: 4px;height: 12px;background-color: red;margin-right: 4px"></span>
页面内容
</h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer" style="text-align: center">
<div style="display: inline-table">
<button type="button" class="btn btn-primary btn-save">确认</button>
<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
</div>
</div>
</div>
</div>
</div>
弹出及关闭模态框
// 弹出
$("#myModal .modal-body").load("aaa.html", function () {
//页面加载完成显示模态框
$("#myModal").modal("show");
})
// 关闭及移除绑定事件
$("#myModal").modal("hide");
$('#myModal').on('hidden.bs.modal', function (e) {
//移除myMoal对象上绑定的事件
$("#myModal").off();
//移除模态框绑定的数据
$("#myModal").removeData();
});
解决模态框多层嵌套时滚动条问题
在使用Bootstrap中模态框过程中,如果出现多层嵌套的时候,如打开模态框A,然后在A中打开模态框B,在关闭B之后,如果A的内容比较多,滚动条会消失,而变为Body的滚动条,这是由于模态框自带的遮罩的问题。
鉴于上述已经了解到原因是由于遮罩造成的,那么可以重新增加遮罩,即在关闭B之后,重新给body增加遮罩
$("body").addClass("modal-open");