jquery 多个引导模式的滚动问题

0kjbasz6  于 2022-11-03  发布在  jQuery
关注(0)|答案(6)|浏览(212)

我有一个页面有一个模态有很多信息,所以你需要滚动。这个模态包含一个链接到第二个模态。
当我

  • 开放模式1
  • 点击链接打开模态2(模态1位于后台)
  • 然后关闭模态2,这样我就回到模态1

modal 1释放了滚动条(仍然有滚动条,但它不做任何事情)。相反,modal停留在打开modal 2时的位置。
我尝试先用js关闭后台模态(但这会弄乱第二个模态的滚动)。似乎每次我试图打开/关闭多个模态时,滚动总是会出现一些问题。
有什么建议吗?

d6kp6zgx

d6kp6zgx1#

新增

.modal { overflow: auto !important; }

敬你的CCS
没有你的代码,我就创建了这个jsFiddle,它重现了你的问题,或者至少是一个非常相似的问题。添加你的代码,我将测试它是否有效。
jsFiddle所示,将该行添加到CSS修复了问题。
解决方案取自github上的this thread,它也提供了其他解决方案。

o3imoua4

o3imoua42#

对我有效的解决方案是:

$('.modal').on("hidden.bs.modal", function (e) { 
    if ($('.modal:visible').length) { 
        $('body').addClass('modal-open');
    }
});
relj7zay

relj7zay3#

$(document).on('hidden.bs.modal', '.modal', function () {
        $('.modal:visible').length && $(document.body).addClass('modal-open');
   });
umuewwlo

umuewwlo4#

this is the solution:

<script>
    $('#id_ofyou_secondary_modal').on('hidden.bs.modal', function (e) {

      $('body').addClass('modal-open');

    });
</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>

then the script will be:

<script>
    $('#mymodal2').on('hidden.bs.modal', function (e) {

      $('body').addClass('modal-open');

    });
</script>

jus add this code and work fine.

8zzbczxx

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

insrf1ej

insrf1ej6#

将以下内容添加到您的CSS

.modal
{
  overflow: scroll !important;
}

相关问题