根据页面滚动位置调整弹出窗口位置，并通过点击关闭。

问题描述：

所以我知道有很多关于这些问题的提要，我已经通过其中大部分，但我无法使它工作。我真的迷失了.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区域即可离开盒子。任何人都可以推荐一个可以处理我的代码的修复程序？

答

好吧，我的问题没有太大的成功。想让你知道我将.white_content的位置改为固定位置，并解决了定位问题。我仍然通过在框外单击而不用更改所有代码来关闭窗口。

根据页面滚动位置调整弹出窗口位置，并通过点击关闭。

相关推荐