bootstrap 多层modal关闭底层modal滚动条失效问题

bootstrap 多层modal关闭底层modal滚动条失效问题

原文地址：https://www.iteye.com/blog/oedy-2376519

bootstrap中如果在模态框弹出模态框，即多重模态框，那么在关闭模态框后，上一级的模态框无法滚动，而且滚动事件会穿透到body层。

 

原理是只要有modal被打开，body会被赋予modal-open这个类，使其overflow变为hidden，无法滚动；而只要有modal被关闭，body的modal-open这个类就会被remove掉。

 

解决方案：在非最上层modelmodal监听隐藏事件，为body重新添加modal-open类：

$(w).on("hidden.bs.modal", function () {

        $(this).removeData("bs.modal");

        $(document.body).addClass("modal-open");  

        $(w).find("div.modal-content").html("");

    });

 

model封装：

function openModal(url, width, height, popId, callBack) {

    if (!popId) {

        var random = Math.floor(Math.random() * 100);

        popId = "viewWindw_" + random;

    }

    var templet = '<div id="' + popId + '" class="modal fade" aria-hidden="true" aria-labelledby="' + popId + 'Label' + '">'

        + '<div class="modal-dialog" role="document">'

        + '<div class="modal-content">'

        + '<div class="modal-body"></div>'

        + '</div>'

        + '</div>'

        + '</div>';

    $(document.body).append(templet);

    if (height)

        $('.modal-dialog').height(height);

    if (width)

        $('.modal-dialog').width(width);

 

    var w = "#" + popId;

    $(w).modal({

        remote: url

    });

 

    $(w).on("hidden.bs.modal", function () {

        $(this).removeData("bs.modal");

        $(w).find("div.modal-content").html("");

    });

 

    if (null != callBack && isFunction(callBack)) {

        $(w).on("loaded.bs.modal", callBack);

    }

    return w;

}