多个引导模式的滚动问题

Scrolling issues with multiple bootstrap modals

本文关键字：滚动 问题 模式      更新时间：2024-02-14

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

当我

  • 开放模态1
  • 单击链接打开模态2（模态1保持在后台）
  • 然后关闭模态2，使我回到模态1

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

我试着先用js关闭背景模态（但这会打乱第二个模态的滚动）。似乎每次我尝试打开/关闭多个模态时，滚动总是会遇到一些问题。

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

添加

.modal { overflow: auto !important; }

致您的CCS。

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

将这一行添加到CSS中修复了这个问题，正如这个jsFiddle所展示的那样。

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

对我有效的解决方案是：

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

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

这就是解决方案：

<script>
    $('#id_ofyou_secondary_modal').on('hidden.bs.modal', function (e) {
      $('body').addClass('modal-open');
    });
</script>

注意"#idofousecondarymode"是第二、第三或无限模态的id。但千万不要写第一个模态的ID。

例如，我有两个模式：

<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添加此代码并运行良好。

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

  1. 只是添加css。modal｛overflow：auto！important；｝这将导致模式下的内容变成可滚动的。如果你想保留以前的内容位置，那就不好了。尤其是在移动浏览器中
  2. 使用javascript跟踪打开的模态，并使用此jQuery选择器$（'.modal:visible'）.length将'modal-open'类保留在body元素中。当有多个模态快速打开和关闭时，这是不起作用的。我的ajax微调器使用BS modal，所以$（'.modal:visible）不准确

这是对我来说有效的：

  1. 使用JS全局变量来跟踪/计数打开的模态；而不是仅使用：visible选择器
  2. 我添加了css样式，这样我就不必重新计算背景z索引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

将以下内容添加到CSS：

.modal
{
  overflow: scroll !important;
}
相关文章：