多个引导模态的滚动问题

Question

我有一个页面,其中包含大量信息的模态,因此您需要滚动.此模态包含指向第二个模态的链接.

当我

• 开放模式1
• 点击链接打开模态2(模态1停留在后台)
• 然后关闭模态2,以便我回到模态1

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

我一开始就用js关闭背景模态(但这会让第二个模态上的滚动变得混乱).似乎每当我尝试打开/关闭多个模态时,我总是会遇到滚动问题.

有关如何处理这个的任何建议？

Answer 1

加

.modal { overflow: auto !important; }

给你CCS。

没有您的代码，我继续创建了这个jsFiddle，它重新创建了您的问题，或者至少是一个非常相似的问题。添加您的代码，我将测试是否可行。

将该行添加到CSS可以解决此jsFiddle所演示的问题。

取自github上此线程的解决方案，它也提供其他解决方案。

Answer 2

对我有用的解决方案是:

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

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>

注意“#idofyousecondarymodal”是二级或三级或无限模态的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>

只需添加此代码并正常工作。

Answer 5

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

1. 只需添加 css .modal { Overflow: auto !important; 这 将导致模态下方的内容变得可滚动。当您想保留以前的内容位置时，这不太好。尤其是在移动浏览器中。
2. 使用 javascript 跟踪打开的模式，并使用此 jQuery 选择器$('.modal:visible').length将 'modal-open' 类保留在 body 元素中。当有多个模式快速打开和关闭时，这不起作用。我使用 BS modal 作为我的 ajax spinner，所以 $('.modal:visible') 不准确。

这对我来说是可行的：

1. 使用 JS 全局变量来跟踪/计数打开的模态；而不是仅仅使用 :visible 选择器
2. 我添加了 css 样式，这样我就不必重新计算背景 z-index /sf/answers/4443161691/

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