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

Question

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

body.modal-open {
  position: fixed;
}

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

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

我想要它，以便仅在两个弹出窗口都关闭时才应开始滚动窗口。我该如何实现？

Answer 1

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