Question

我最初创建了一个bootbox对话框：

// First dialog
bootbox.dialog({
    message: '<input type="button" value="Open second modal" class="second" />' + '<br/>bar'.repeat(100),
    allowCancel: true
});

现在滚动会影响对话框，并且网页会保持原位。

// Second dialog
bootbox.dialog({message: "Second dialog!", allowCancel: true});

创建另一个引导框对话框/警告/提示并关闭它后，滚动不再影响第一个对话框。网页内容移动，第一个对话框保持冻结状态（意外行为）。我该如何解决这个问题？

可以点击第一个对话框中可见的任何按钮，并且主页面上的按钮不可点击（预期行为）。

Answer 1

Bootstrap模态由单模态查看组成，但是如果我们想要模态模态，那么当当前模态关闭时，dom会被重置，并且将从主体标记In function 'void showA(A&)': 7:27: error: invalid use of incomplete type 'class A' :cout << "A::a=" << x.a; ^ 3:7: note: forward declaration of 'class A' class A; ^中删除，这会导致滚动问题。< / p>

解决方案1 

关闭第modal-open个身体的第二个模态。

modal-open

Solution 1

解决方案2

你也可以用css实现同样的目标。

 $('.bootbox.modal').on('hidden.bs.modal', function () {
  if($(".modal").hasClass('in')){
             $('body').addClass('modal-open');
         }
})

这将使模态可滚动，但会有2个滚动条。

Solution 2

- 帮助：）

Answer 2

基于帮助答案，您必须在引导程序4中使用

$(document).on('hidden.bs.modal', '.bootbox.modal', function (e) {    
        if($(".modal").hasClass('show')) {
            $('body').addClass('modal-open');
        }
})

Answer 3

在引导程序3中，您必须使用以下代码：

$(document).on('hidden.bs.modal', '.bootbox.modal', function (e) {    
        if($(".modal").hasClass('in')) {
            '$('body').addClass('modal-open');
        }
});

打开第二个模态后，Bootbox模态不可滚动

3 个答案: