Question

我有2个引导模态。当我打开第一个时，垂直滚动条工作正常。然后，我有一个选项从第一个模态内部删除其不透明度不透明度并打开第二个模式。通过关闭第二个模态我得到了我的第一个模态，但是为了能够滚动到模态我只能滚动到背景体。

注意：只有在我打开第二个模态时才会发生。

我使用JQuery来操纵模态。

一些代码：

$('#button').click(function(){
    $('#myModal2').modal({
        show: 'true'
    }); 

});

$('#myModal2').on('shown.bs.modal', function() {
   $('#myModal').css('opacity', 0);
});

$('#myModal2').on('hidden.bs.modal', function() {
   $('#myModal').css('opacity', 1);
});

提前感谢您的帮助。

更新

我通过添加到bootstrap源来临时解决我的问题：

.modal { overflow: auto !important; }

它有效，但现在我可以滚动身体和模态。

我愿意接受其他建议。

Answer 1

我遇到了同样的问题。我找到了解决方案。当你打开一个模态时， bootstrap会添加＆＃34; modal-open＆＃34;阶级到身体。如果您关闭该模式，引导程序会将其删除。当你有2个模态时，第二个模态将删除＆＃34;模态开放＆＃34;需要第一个模态的身体的类。

要纠正这个问题，你必须在打开第二个模态之前检查第一个模态是否打开。我这样做是为了检查模态开放课程。

var firstModalOpen = $("body").hasClass("modal-open");
$("#second-modal").modal("show");

当第二个模态关闭时，你会检查第一个模态是否被打开并向主体添加类模态打开。

$("#second-modal").on('hidden.bs.modal', function()
{
    if (firstModalOpen)
        $("body").addClass("modal-open");
});

Answer 2

这将同时解决滚动模态和主体。这将在＃modal2打开时禁用正文滚动。

$('#modal2').on('hidden.bs.modal', function (e) {
    $("html").css("overflow", "scroll");
});
$('#modal2').on('show.bs.modal', function (e) {
    $("html").css("overflow", "hidden");
});

Bootstrap的模态 - 当我打开和关闭第二个模态时，垂直滚动条消失了第一个模态

2 个答案: