jquery - 模态与另一个模态导致 body 滚动

Question

https://jsfiddle.net/e6x4hq9h/

打开第一个模式。它打开很好。删除背景滚动条。

从该模态中打开模态。它会导致滚动到后台。

我搜索了其他解决方案，但似乎都无法解决此问题。我尝试了此页面上的所有内容:Bootstrap modal: close current, open new等等。

Javascript:

// Only one of these modals should show at a time.
$('#myModal2').on('show.bs.modal', function (e) {
    $('#myModal').modal('hide');
})
.on('hide.bs.modal', function (e) {
    $('#myModal').modal('show');
});

更新:第一个和第二个模式也必须允许滚动，如在这个 fiddle 中所见:https://jsfiddle.net/e6x4hq9h/21/

Answer 1

为了进一步详细说明 Hardik 响应，本质上发生的是 .modal-open 类到 body 元素的硬编码内联声明。但是，.modal-open 类也有一个嵌套声明 .modal-open .modal，它设置了 overflow-y 属性模态是“自动”——因此它是可滚动的。为此，将 .css("overflow-y", "auto") 添加到将打开的模式中。这是基于你的 fiddle 的样子:

$(document).ready(function () {

    // Only one of these modals should show at a time.
    $('#myModal2').on('show.bs.modal', function (e) {
        $('#myModal').modal('hide');
        $('body').css("overflow","hidden");
        $(this).css("overflow-y", "auto");
    })
    .on('hide.bs.modal', function (e) {
        // @todo reload the job
        $('#myModal')
            .modal('show')
            .css("overflow-y", "auto");
    });

    $('#myModal').on('show.bs.modal', function (e) {
        // @todo reload the job
        $('body').css("overflow","hidden");
    })
    .on('hide.bs.modal', function (e) {
        // @todo reload the job
        $('body').css("overflow","visible");
    });
});

可在此处查看结果:https://jsfiddle.net/e6x4hq9h/22/