模态内部的自举模态；关闭模式后无法滚动 [英] Bootstrap modal inside a modal; Cannot scroll after closing modal
问题描述
我有一个引导程序模态，它调用了另一个引导程序模态.现在的问题是，当我打开第二个引导程序模态并关闭它时，第一个引导程序模态不再滚动.相反，滚动是通过后台主页获得的.我在这里应该做些什么，以便当我关闭第二个模态时，第一个模态得到聚焦并获得第二个模态之前的滚动.
I have a bootstrap modal that calls the another bootstrap modal. Now the issue is that when I open the second bootstrap modal and close it the first bootstrap modal does not scroll any more. Instead the scroll is obtained by the background main page. What should I need to do here so that when i close the second modal then the first modal gets focused and obtain the scroll as it was before the second modal.
$('#modalTrigger').on('click', function () {
setTimeout(function () {
$('#modalBody').html($('#contentText').html());
}, 1000);
});
$('#btnPrimaryModalAction').on('click', function () {
$('#secondaryModal').modal('show');
});
这是 JSFIDDLE 的链接，其中包含定义上述情况的两个引导程序模式. /p>
Here is the link to JSFIDDLE that contains the two bootstrap modal which defines the situation mentioned above.
推荐答案
Bootstrap模态(如图所示)将新的modal-open类添加到您的<body>元素中.并在关闭时删除modal-open类.
Bootstrap modal when shown adds a new modal-open class to your <body> element. And when being closed, it removes the modal-open class.
因此，在关闭子模式时，只需要将该类重新应用于<body>元素即可.这是东西:
So you only need to re-apply that class to your <body> element when closing the child modal. Here's the thing:
为父模态内的模态添加一个新的自定义css类.
Add a new custom css class for the modals inside your parent modal.
在我的情况下，我使用.child-modal
in my case, I use .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');
});
html
<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>
这篇关于模态内部的自举模态；关闭模式后无法滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
