使用另一个模态的模态导致在身体上滚动

Question

https://jsfiddle.net/e6x4hq9h/

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

从该模态中打开模态.它会导致滚动转到背景.

我搜索了其他解决方案,似乎没有人解决这个问题.我尝试了这个页面上的所有内容:Bootstrap模式:关闭当前,打开新的等等.

使用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');
});

更新:第一个和第二个模式也必须允许滚动,如在这个小提琴中可以看到:https://jsfiddle.net/e6x4hq9h/21/

Answer 1

.modal-open为了进一步详细说明 Hardik 响应，本质上发生的是类到 body 元素的硬编码、内联声明。然而，该类.modal-open还有一个嵌套声明，用于将模式的属性.modal-open .modal设置overflow-y为“auto”——这就是它可滚动的原因。要实现此目的，请添加.css("overflow-y", "auto")到将打开的模式。根据你的小提琴，这就是它的样子：

$(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/