多个 bootstrap 模式的滚动问题

Question

我有一个包含大量信息的模态页面，因此您需要滚动。此模态包含 link 到第二个模态。

当我

打开模式 1
点击 link 打开模态 2（模态 1 留在后台）
然后关闭模式 2，以便我回到模式 1

modal 1 松动滚动（仍然有一个滚动条，但它什么都不做）。相反，模态保持在打开模态 2 时的位置。

我试过先用 js 关闭背景模态（但这会弄乱第二个模态上的滚动）。似乎每次我尝试 open/close 多个模式时，我总是遇到滚动问题。

关于如何处理这个问题有什么建议吗？

Answer 1

添加

.modal { overflow: auto !important; }

给你的 CCS.

在没有你的代码的情况下，我继续创建了这个 jsFiddle 来重现你的问题，或者至少是一个非常相似的问题。添加您的代码，我会测试这是否有效。

将该行添加到 CSS 解决了这个问题 jsFiddle。

解决方案取自 github 上的 this thread，它也提供了其他解决方案。

Answer 2

这是解决方案：

<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 3

对我有用的解决方案是：

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

Answer 4

将以下内容添加到您的 CSS :

.modal
{
  overflow: scroll !important;
}

Answer 5

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

Answer 6

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

只需添加 css .modal { overflow: auto !important; } 这将导致模态下方的内容变得可滚动。当你想保持以前的内容位置时不好。特别是在移动浏览器中。
使用 javascript 跟踪打开的模式并使用此 jQuery 选择器 $('.modal:可见').length.当快速打开和关闭多个模式时，这不起作用。我为我的 ajax 微调器使用 BS 模态，因此 $('.modal:visible') 不准确。

这是适合我的工作：

使用JS全局变量保持track/count打开的模态；而不是仅仅使用 :visible 选择器
我还添加了 css 样式，这样我就不必重新计算背景 z-index

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;
 */
  background: rgba(0, 0, 0, 0.5);
}

这是从 @Keeleon 修改 fiddle 以修复 https://jsfiddle.net/4m68uys7/

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

多个 bootstrap 模式的滚动问题

Scrolling issues with multiple bootstrap modals

html

javascript

jquery

twitter-bootstrap

bootstrap-modal