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

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);
});

提前感谢您的帮助。

更新：

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

.modal { overflow: auto !important; }

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

我愿意接受其他建议。

Answer 1

我也遇到了同样的问题。我找到了解决方案。当您打开一个模态框时，bootstrap 会在 body 中添加“modal-open”类。如果您关闭该模式，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");
});

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");
});