Bootstrap模态框的使用及解决多个模态框嵌套出现滚动条错乱问题

版权声明：本文为博主原创文章，未经博主允许不得转载。 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">&times;</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");