Question

我最近构建了一个JS / CSS模态系统。该项目使用的是Bootstrap模式，但是通过在其中放置不能滚动或正确聚焦在移动设备上的表单和大量内容，将其推向极限。

通过点击大部分页脚链接（隐私政策，条款和条件等），可以触发模态系统here。

一般问题：模态有固定位置的CSS，当你滚动模态时，它会导致正文向下滚动。我尽力尝试做到这一点并不重要，主要是通过＆＃34;溢出＆＃34;，＆＃34;身高＆＃34;和一些光＆＃34; z-index＆＃34;东西。它在iOS上运行得非常好，但在我们发现的Android上却没有。

细节：当按钮的滚动位置不在顶部时，X按钮不可点击，并且模式不会向上滚动，直到身体的滚动位置在顶部。

我知道我强迫它...转换对网站很重要，重新加载页面并将它们保存在漏斗中非常重要。＆＃34;我是否应该更改设置的方式，以便不是尝试在正文的顶部上显示可滚动元素，而是暂时替换正文？或者是否有一个CSS修复，我错过了？我很困惑。

Answer 1

这是我最终使用的内容！ HTML ...

<body>

  <main id="main">
    Site Content
  </main>

  <aside id="modals">
    Modals In Here
  </aside>

</body>

对于CSS，我做了一个仅针对移动设备的媒体查询。 CSS使用position:fixed和position:static以标准方式（不是display:block）显示所有模态。内容虽然是＆＃34;模态＆＃34;，但却以100％标准的支持方式显示。现在没有与滚动/焦点相关的错误。

JS正在向我在CSS选择器中使用的主体添加一个类。至于JS的其余部分，我将把这些库发布到GitHub并使它们可以重用。如果您有兴趣，请+1！

此系统仍然有效here。