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

jucafojl  于 2022-12-08  发布在  Bootstrap
关注(0)|答案(3)|浏览(142)

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

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

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

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

zujrkrfu

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>
vof42yt1

vof42yt12#

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

u5i3ibmn

u5i3ibmn3#

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

相关问题