Javascript 导致对齐问题的模式窗口（可能是由于OnePageScroll.js）

解决方案：
我所要做的就是改变导致页面溢出的节中心对齐方式

问题
当我在第一页打开模式窗口（重叠窗口，比如网站在你离开前要求你注册一份时事通讯）时，它们都可以正常工作。当我向下滚动并在第二或第三页上打开一个模式窗口时，它会破坏模式窗口后面元素的对齐

图片


正如您在第一张图片中所看到的，它在第一页上运行良好。这个问题发生在第二页和第三页，似乎是背景元素的对齐问题

相关代码
我的HTML：

链接

---

非常感谢。一段时间以来，我一直在努力寻找造成这种情况的原因。

在破损的页面上跟踪chrome开发工具中的样式。您可以看到哪些样式表包含有问题的样式，以及如何覆盖它们。如果有问题的样式是内联的，那么您需要查看javascript。这可能是因为我对这方面比较陌生，但是。。。我真的不知道我在找什么。我只有两个样式表——我的，还有一个用于OnePageScroll.js。

<!-- Modal window -->
<div id="open-csci-modal" class="modal-bg">
  <div class="modal-content">
    <a href="#close" title="Close" class="close">
    <img src="img/exit-icon.png"></a>
    <h2>Computer Science Major</h2>
    <p>Paragraph about what I've learned in school.</p>
  </div>
</div>

section {
  height: 100vh;
  background-size: cover;
}
.modal-bg {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0,0,0,0.8);
  z-index: 99999;
  opacity:0;
  transition: opacity 400ms ease-in;
  pointer-events: none;
}
.modal-bg:target {
  opacity:1;
  pointer-events: auto;
}
.modal-bg > div {
  width: 800px;
  height: 410px;
  position: relative;
  margin: 10% auto;
  padding: 5px 20px 13px 20px;
  border-radius: 10px;
  background: rgba(112, 156, 250, 0.75);
}