模态与另一个模态导致正文滚动答案

【问题标题】：Modal With Another Modal Causes Scroll on Body模态与另一个模态导致正文滚动
【发布时间】：2016-09-24 20:40:27
【问题描述】：

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

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

我搜索了其他解决方案，但似乎都没有解决这个问题。我尝试了此页面上的所有内容：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');
});

更新：第一个和第二个模态还必须允许滚动，如此小提琴所示：https://jsfiddle.net/e6x4hq9h/21/

【问题讨论】：

这个jsfiddle.net/e6x4hq9h/19怎么样
同样的问题。单击第一个模态。然后是第二个。然后关闭第二个。滚动条在背景上。
.modal('handleUpdate') 重新调整模态框的位置以应对滚动条，以防出现滚动条，这会使模态框向左跳转。仅当模态的高度在打开时发生变化时才需要。 $('#myModal').modal('handleUpdate')
如果您推荐 .modal('handleUpdate')，请张贴您的意思，因为我尝试了很多方法但没有成功。
实际上，这不会改变任何事情。它的唯一目的是纠正填充。请参阅 bootstrap.js，其中显示 `Modal.prototype.adjustDialog = function```

标签： jquery css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

为了进一步详细说明 Hardik 的响应，本质上正在发生的是对 body 元素的 .modal-open 类的硬编码内联声明。然而，.modal-open 类也有一个 .modal-open .modal 的嵌套声明，它将模式的 overflow-y 属性设置为“自动”——因此它是可滚动的。为此，请将.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/

【讨论】：

【解决方案2】：

我想这就是你要找的。p>

https://jsfiddle.net/hardikjain/e6x4hq9h/20/

变化：

$('#myModal2').on('show.bs.modal', function (e) {
    $('#myModal').modal('hide');
$('body').css("overflow","hidden");
})
.on('hide.bs.modal', function (e) {
    // @todo reload the job
    $('#myModal').modal('show');
});
$('#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");
});

【讨论】：

所以关闭。第二个模式不允许滚动。我更新了问题，我将更新问题以反映这一点。 jsfiddle.net/e6x4hq9h/21