Question

所以我知道有很多关于这些问题的信息，而且我已经完成了大部分问题，但我无法使其发挥作用。我真的迷失了.js。

所以我使用非常简单的弹出窗口，通过引用主题的标题提供更多关于主题的内容。我正在使用一个简单的css代码：

.black_overlay {
  display: none;
  position: absolute;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
  background-color: black;
  z-index: 1001;
  -moz-opacity: 0.8;
  opacity: .80;
  filter: alpha(opacity=80);
}
.white_content {
  display: none;
  position: absolute;
  left: 20%;
  top:25%;
  width: 70%;
  height: auto;
  padding: 10px;
  border: 6px solid #ed7d86;
  background-color: white;
  text-align: center;
  z-index: 1002;
  overflow: auto;
}

和html：

<div class="flex-item">
    <a href="javascript:void(0)" onclick="document.getElementById('TITLE').style.display='block';
document.getElementById('fade').style.display='block'">TITLE</a> 
    <div id="TITLE" class="white_content">Something else about TITLE. 
<a href="javascript:void(0)" onclick="document.getElementById('TITLE').style.display='none';
document.getElementById('fade').style.display='none'">Close</a></div>
</div>

这段代码效果很好，直到我在页面上较低的元素上尝试它，在这种情况下，框显然继续显示在设置的顶部和左侧位置，这意味着我必须向上滚动才能看到它。如果我摆脱了顶部和左边的条件，我最终会在页面的某个角落随机显示该框。

我还希望人们只需点击black_overlay区域即可离开该框。任何人都可以推荐一个适用于我的代码的修复程序吗？

Answer 1

好吧，我的问题并没有太大成功。想告诉你我已经将.white_content的位置改为固定，它解决了我的定位问题。我仍在努力通过在框外点击关闭窗口而不更改我的所有代码。

根据页面滚动位置调整弹出窗口位置，然后单击关闭。

1 个答案: