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

Question

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

注意:只有当我打开第二个模式时才会发生这种情况。

我使用 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 将“modal-open”类添加到 body。如果您关闭该模式，bootstrap 会将其删除。当您有 2 个模态框时，第二个模态框删除需要第一个模态框的主体的“modal-open”类。

要更正此问题，您必须在打开第二个模式之前检查第一个模式是否打开。我这样做是为了检查 modal-open 类。

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

当第二个模式关闭时，您检查第一个模式是否打开并将类 modal-open 添加到主体。

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