Question

我必须模态，模态1很长并且它首先打开，当它出现时我可以很容易地滚动页面，模态2很短但是当我堆叠打开模态2（当模态1仍然打开时打开模态2）和然后关闭模态2：模态1不能再滚动。我试图隐藏模型1，然后在模态2隐藏时再次显示它，但它没有帮助

$('#modal2').on('hide.bs.modal', function () {
   $("#modal1").modal('show');
});

Answer 1

好的，在挖掘之后，我发现了一个黑客，发布在这里，所以任何人都有同样的问题可以解决。

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

Answer 2

简单的答案是Bootstrap不支持重叠模式。来自their documentation，第一个警告说;

不支持重叠模式

请确保不要打开模态   另一个仍然可见。一次显示多个模态   需要自定义代码。

这很可能是他们不推荐的原因之一。我不会在没有充分理由的情况下亲自推荐堆叠模态，可能有更好的方法来做你想做的事情，例如，你可以简单地以编程方式关闭第一个模态然后再打开第二个模态，你可以改变内容动态的第一个模态，您可以在模态等中使用制表符。

看起来你说在打开第二个模式之前你已经关闭了你的第一个模态。也许你可以扩展这一点，因为很明显，Bootstrap不支持或建议开箱即用堆叠模态。

Answer 3

来自@Thinh Hoang Nhu的黑客不是为我工作，但他走在正确的轨道上。如果有人遇到同样的问题，我的解决方案是在第二个模态中添加一个类（我知道在打开另一个模态后打开的那个）并添加了这个函数，但延迟时间很短。

$('body').on('hide.bs.modal', '.modal2nd', function () {
    setTimeout(function(){
        $('body').addClass('modal-open');
    }, 500);
});

这对我有用。

堆叠另一个模态后无法滚动长模态

3 个答案: