模态框的使用模板
新建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>
弹出及关闭模态框
// 在页面上弹出
var modalDiv = $('<div><div>').appendTo('body');
modalDiv.load("aaa.html", function () {
//页面加载完成显示模态框
$("#myModal").modal("show");
})
// 关闭模态框
$("#myModal").modal("hide");
//点击确认按钮 .btn-save为确认按钮的class
$('#myModal').on('click', '.btn-save', function () {
// ***
$("#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");