javascript - 打开多个弹出窗口时如何防止背景滚动

Question

我调用了弹出窗口Products，当用户单击任何产品时，会打开一个新的弹出窗口，其中包含product information. 使用此 CSS 打开弹出窗口时，我防止背景滚动：

body.modal-open {
  position: fixed;
}

当用户关闭弹出窗口时，我删除了此position属性，以便背景可以再次开始滚动。

问题是，当我打开products弹出窗口时，背景停止滚动（这很好），然后当我打开product information弹出窗口时，背景仍然停止（这也很好），但是当用户关闭时product information，滚动又开始了。

我想要它，这样窗口应该只在两个弹出窗口都关闭时才开始滚动。我怎样才能做到这一点？

标签： javascriptjqueryhtmlcsstwitter-bootstrap-3

Answer 1

CSS样式属性overflow-y: hidden; 如果应用于要删除滚动的 HTML 元素，则防止背景滚动。在浏览器上尝试以下操作： a) 打开带有弹出窗口的页面。b) 应用样式溢出-y：隐藏；在要删除滚动的元素上。滚动应该消失。c）为了动态地实现这一点，您编写了 js 代码以在单击弹出触发器元素时将上述样式附加到所需元素上。只有 CSS 无法满足您的要求，因为您需要动态进行。