我有一个页面有一个模态有很多信息,所以你需要滚动。这个模态包含一个链接到第二个模态。当我
modal 1释放了滚动条(仍然有滚动条,但它不做任何事情)。相反,modal停留在打开modal 2时的位置。我尝试先用js关闭后台模态(但这会弄乱第二个模态的滚动)。似乎每次我试图打开/关闭多个模态时,滚动总是会出现一些问题。有什么建议吗?
d6kp6zgx1#
新增
.modal { overflow: auto !important; }
敬你的CCS没有你的代码,我就创建了这个jsFiddle,它重现了你的问题,或者至少是一个非常相似的问题。添加你的代码,我将测试它是否有效。如jsFiddle所示,将该行添加到CSS修复了问题。解决方案取自github上的this thread,它也提供了其他解决方案。
CCS
o3imoua42#
对我有效的解决方案是:
$('.modal').on("hidden.bs.modal", function (e) { if ($('.modal:visible').length) { $('body').addClass('modal-open'); }});
$('.modal').on("hidden.bs.modal", function (e) {
if ($('.modal:visible').length) {
$('body').addClass('modal-open');
}
});
relj7zay3#
$(document).on('hidden.bs.modal', '.modal', function () { $('.modal:visible').length && $(document.body).addClass('modal-open'); });
$(document).on('hidden.bs.modal', '.modal', function () {
$('.modal:visible').length && $(document.body).addClass('modal-open');
umuewwlo4#
this is the solution:
<script> $('#id_ofyou_secondary_modal').on('hidden.bs.modal', function (e) { $('body').addClass('modal-open'); });</script>
<script>
$('#id_ofyou_secondary_modal').on('hidden.bs.modal', function (e) {
</script>
take care that "#idofyousecondarymodal" is the id of the secondary or tertiary or infinite modal. but NEVER write the ID of the first modal.example i have 2 modal:
<div id="mymodal1" class="modal fade in" style="display:none;">....</div><div id="mymodal2" class="modal fade in" style="display:none;">....</div>
<div id="mymodal1" class="modal fade in" style="display:none;">
.
</div>
<div id="mymodal2" class="modal fade in" style="display:none;">
then the script will be:
<script> $('#mymodal2').on('hidden.bs.modal', function (e) { $('body').addClass('modal-open'); });</script>
$('#mymodal2').on('hidden.bs.modal', function (e) {
jus add this code and work fine.
8zzbczxx5#
我尝试了前面的解决方案,但不适用于我的用例:1.只添加css**.modal {溢出:自动!重要;}这将导致模态下面的内容变得可滚动。当你想保持以前的内容位置时不太好。特别是在移动的浏览器中。1.使用javascript来跟踪打开的模式,并使用这个jQuery选择器$('. modal:visible').length**在body元素中保留'modal-open'类。当有多个模式快速打开和关闭时,这是不起作用的。我使用BS模式作为我 AJAX 微调器,所以$('. modal:visible')是不准确的。这是我的工作之一:1.使用JS全局变量跟踪/计数打开的模态;而不是只使用:visible selector1.我还添加了css样式,这样就不必重新计算背景z-index https://stackoverflow.com/a/63473738/423356第一个这是从@Keeleon修改的小提琴,用于修复https://jsfiddle.net/4m68uys7/这是一个github问题https://github.com/nakupanda/bootstrap3-dialog/issues/70
insrf1ej6#
将以下内容添加到您的CSS:
.modal{ overflow: scroll !important;}
.modal
{
overflow: scroll !important;
6条答案
按热度按时间d6kp6zgx1#
新增
敬你的
CCS
没有你的代码,我就创建了这个jsFiddle,它重现了你的问题,或者至少是一个非常相似的问题。添加你的代码,我将测试它是否有效。
如jsFiddle所示,将该行添加到CSS修复了问题。
解决方案取自github上的this thread,它也提供了其他解决方案。
o3imoua42#
对我有效的解决方案是:
relj7zay3#
umuewwlo4#
this is the solution:
take care that "#idofyousecondarymodal" is the id of the secondary or tertiary or infinite modal. but NEVER write the ID of the first modal.
example i have 2 modal:
then the script will be:
jus add this code and work fine.
8zzbczxx5#
我尝试了前面的解决方案,但不适用于我的用例:
1.只添加css**.modal {溢出:自动!重要;}这将导致模态下面的内容变得可滚动。当你想保持以前的内容位置时不太好。特别是在移动的浏览器中。
1.使用javascript来跟踪打开的模式,并使用这个jQuery选择器$('. modal:visible').length**在body元素中保留'modal-open'类。当有多个模式快速打开和关闭时,这是不起作用的。我使用BS模式作为我 AJAX 微调器,所以$('. modal:visible')是不准确的。
这是我的工作之一:
1.使用JS全局变量跟踪/计数打开的模态;而不是只使用:visible selector
1.我还添加了css样式,这样就不必重新计算背景z-index https://stackoverflow.com/a/63473738/423356
第一个
这是从@Keeleon修改的小提琴,用于修复https://jsfiddle.net/4m68uys7/
这是一个github问题https://github.com/nakupanda/bootstrap3-dialog/issues/70
insrf1ej6#
将以下内容添加到您的CSS: