Bootstrap 靴带莫代尔里面有莫代尔;关闭模态后无法滚动

jucafojl 于 2022-12-08 发布在 Bootstrap

关注(0)|答案(3)|浏览(143)

我有一个 Bootstrap 模态，它调用另一个 Bootstrap 模态。现在的问题是，当我打开第二个 Bootstrap 模态并关闭它时，第一个 Bootstrap 模态不再滚动。相反，滚动是由后台主页获得的。我应该在这里做些什么，以便当我关闭第二个模态时，第一个模态得到关注，并获得滚动，因为它是在第二个模态之前。

$('#modalTrigger').on('click', function () {
    setTimeout(function () {
        $('#modalBody').html($('#contentText').html());
    }, 1000);
});

$('#btnPrimaryModalAction').on('click', function () {
    $('#secondaryModal').modal('show'); 
});

下面是指向JSFIDDLE的链接，其中包含定义上述情况的两个引导模式。

twitter-bootstrap

来源：https://stackoverflow.com/questions/45784610/bootstrap-modal-inside-a-modal-cannot-scroll-after-closing-modal

3条答案

按热度按时间

zujrkrfu1#

引导模态在显示时会将一个新的modal-open类添加到<body>元素中。关闭时，它会删除modal-open类。
因此，在关闭子模态时，只需将该类重新应用于<body>元素。
为父模态中的模态添加一个新的自定义css类。
在我例子中，我使用.child-modal，

/* when using a modal within a modal, add this class on the child modal */
$(document).find('.child-modal').on('hidden.bs.modal', function () {
    console.log('hiding child modal');
    $('body').addClass('modal-open');
});

超文本标记语言

<div class="modal fade" tabindex="-1" role="dialog">
     ...
     <a href="#" data-toggle="modal" data-target="#other_modal" title="Help">
       Open the other modal
     </a>
     ...
</div>
<div class="modal fade child-modal" id="other_modal" tabindex="-1" role="dialog">
   ... other codes here ...
</div>

赞(0）回复(0）举报 2022-12-08

vof42yt12#

你的问题是当一个模态被打开时 Bootstrap 是如何“锁定”body元素的。当模态被打开时，在body元素上将添加类modal-open。当你打开第二个模态时，什么也没有发生，但是当你关闭它的时候..它会删除那个需要的类model-open。你需要在你的js中添加一些逻辑来保持那个类在那里直到最后一个模态被关闭。它并不是真的要在情态动词里面添加情态动词。
我建议您尝试使用通过 Bootstrap 提供的模态事件方法来规避这个问题

赞(0）回复(0）举报 2022-12-08

u5i3ibmn3#

尝试将overflow: auto添加到您的第一个模态，也可以引用this

赞(0）回复(0）举报 2022-12-08