Question

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

从该模态中打开模态。它会使滚动转到背景。

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

Answer 1

我认为这就是你要找的东西。

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

的变化：

<input type="button" id="regBtn" runat="server" onserverclick="RegClick"/>

Answer 2

为了进一步详细说明Hardik响应，基本上发生的是对{body}元素的.modal-open类的硬编码内联声明。但是，.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/

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

2 个答案: