Question

我有一个带有大量信息的模态的页面，所以你需要滚动。此模态包含指向第二个模态的链接。

当我

open modal 1
点击链接打开模态2（模态1停留在后台）
然后关闭模态2以便我回到模态1

模态1失去滚动（仍然有一个滚动条，但它没有做任何事情）。相反，模态保持在打开模态2时的位置。

我首先使用js关闭背景模态（但是这会在第二个模态上滚动）。似乎每当我尝试打开/关闭多个模态时，我总是会遇到滚动问题。

有关如何处理此事的任何建议吗？

Answer 1

对我有用的解决方案是：

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

Answer 2

添加

.modal { overflow: auto !important; }

致CCS。

如果没有您的代码，我会继续创建此jsFiddle来重新创建您的问题，或者至少是一个非常类似的问题。添加您的代码，我将测试这是否有效。

将该行添加到CSS修复了此问题，如此jsFiddle所示。

从github上的this thread获取的解决方案也提供了其他解决方案。

Answer 3

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

Answer 4

这是解决方案：

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

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

    });
</script>

注意＆＃34;＃idofyousecondarymodal＆＃34;是二级或三级或无限模态的id。但绝不能写出第一个模态的ID。

示例我有2个模态：

<div id="mymodal1" class="modal fade in" style="display:none;">
.
.
.
.
</div>
<div id="mymodal2" class="modal fade in" style="display:none;">
.
.
.
.
</div>

然后脚本将是：

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

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

    });
</script>

jus添加此代码并正常工作。

Answer 5

我尝试了以前的解决方案，但不适用于我的用例：

仅添加CSS .modal {溢出：自动！重要； } 这将导致模式下方的内容滚动。当您想保留以前的内容位置时不好。尤其是在移动浏览器中。
使用JavaScript来跟踪打开的模态，并使用此jQuery选择器 $（'。modal：visible'）。length 将'modal-open'类保留在body元素中。快速打开和关闭多个模式时，此功能不起作用。我对ajax微调器使用BS模态，所以$（'。modal：visible'）不准确。

这对我来说是可行的：

使用JS全局变量来跟踪/计数打开的模态；而不是只使用：visible选择器
并且我添加了CSS样式，因此不必重新计算背景z-index https://stackoverflow.com/a/63473738/423356

var bootstrapModalCounter = 0; //counter is better then using visible selector

    $(document).ready(function () {  
      $('.modal').on("hidden.bs.modal", function (e) {
        --bootstrapModalCounter;
        if (bootstrapModalCounter > 0) {
          //don't need to recalculate backdrop z-index; already handled by css
          //$('.modal-backdrop').first().css('z-index', parseInt($('.modal:visible').last().css('z-index')) - 10);
          $('body').addClass('modal-open');
        }
      }).on("show.bs.modal", function (e) {
        ++bootstrapModalCounter;
        //don't need to recalculate backdrop z-index; already handled by css
      });
    });

.modal { 
/*simple fix for multiple bootstrap modal backdrop issue: 
don't need to recalculate backdrop z-index;
https://stackoverflow.com/questions/19305821/multiple-modals-overlay/21816777 */
  background: rgba(0, 0, 0, 0.5);
}

这是@Keeleon修改的小提琴，用于修复https://jsfiddle.net/4m68uys7/

这是github问题https://github.com/nakupanda/bootstrap3-dialog/issues/70

Answer 6

将以下内容添加到 CSS ：

.modal
{
  overflow: scroll !important;
}

多个引导模态的滚动问题

6 个答案: