堆叠模式在关闭时滚动主页[重复]

Posted 2023-02-22

【中文标题】堆叠模式在关闭时滚动主页[重复]

【英文标题】：Stacking modals scrolls the main page when one is closed [duplicate]

【发布时间】：2015-02-06 22:19:50

【问题描述】：

使用 Bootstrap 3.3.1，我能够在没有任何额外脚本的情况下获得堆叠模式（如在 Bootstrap 站点中复制粘贴模式模板并将其中的许多模板放在同一页面中）。问题是每当顶部（最高）模态关闭时，滚动焦点会转到主页（在所有剩余模态下），并且只有在打开新模态时才会返回顶部模态。有没有办法将滚动焦点设置到下一个模式而不是主页？

当我通过向body 和单个modals（通过Firefox 的“编辑为html”来测试滚动）添加文本来测试解决方案here（甚至this one）时，它具有我需要。

当我尝试使用最新的 jQuery 和 Bootstrap 时出现的一个问题是 modal-backdrop 然后显示在 modal-dialog 上方。 检查元素 每当一个或多个模态出现时，我注意到modal-backdrop 的div 出现在modal 的主要div 中：

<div id="myModal" class="modal fade" aria-hidden="true" style="display: none;">
  <div class="modal-backdrop fade in"></div>
  <div class="modal-dialog modal-lg"></div>
</div>

与body 的底部相比，它就像here。当我在该链接示例上使用 3.3.1 时，甚至会发生这种情况。我认为这导致主要的div 和modal-backdrop 具有修改后的z-index，但不是modal-dialog，所以我尝试通过添加一行将modal-dialog 设置为具有其父级的@987654340 来修复它@ plus 1. 它把背景放在适当的位置，但滚动问题仍然存在。这是因为 3.3.1 的变化还是我看错了解决方案？

【问题讨论】：

看来您只需将data-backdrop="false" 添加到您的嵌套模式中，请参阅：jsfiddle.net/u038t9L0

背景不是问题（在问题的最后一段中修复了该问题）。如果顶部关闭，则无法滚动显示的模态。添加您必须在正文中滚动浏览的长内容以及 jsfiddle 中的每个模式。打开每个模态，你会发现你可以上下滚动。关闭一个，您会注意到模态框仍然不滚动，但正文中的内容（不在任何模态框中）会滚动。

【参考方案1】：

背景不是问题。如果顶部关闭，则无法滚动显示的模式。

您应该添加以下 javascript：

$('.modal').on('hidden.bs.modal', function (e) 
    if($('.modal').hasClass('in')) 
    $('body').addClass('modal-open');
        
);

演示：http://jsfiddle.net/u038t9L0/1/

当正文具有 modal-open 类时，将为您的 .modals 应用以​​下 CSS：

.modal-open .modal 
  overflow-x: hidden;
  overflow-y: auto;

关闭模式也会从模式中删除modal-open 类。

【讨论】：

使用角度，模态在身体上出现动态。因此，需要将选择器更改为$('body').on('hidden.bs.modal', '.modal', function (e) 。这将适用于模板内的模态

对于 Bootstrap 4，请改用第二行 if($('.modal').hasClass('show'))