Javascript 将弹出div放置在用户正在查看的位置

我有一个弹出式div正在单击。我需要让弹出窗口出现在用户正在查看的浏览器中。现在在短页面上没有弹出div，而在长页面上，你必须向下滚动才能看到弹出窗口

到目前为止，我已经在我的popUpDiv中尝试了一些不同的东西，但没有成功

margin: 30px auto 0;
    top: 50%;
    left: 50%;



 margin-left: -155px;
    margin-top: -700px;

这是我的css：

/*STYLES FOR CSS POPUP*/
#blanket {
   background-color:#111;
   opacity: 0.65;
   *background:none;
   position:absolute;
   z-index: 9001;
   top:0px;
   left:0px;
   width:100%;
}
#popUpDiv {
    padding: 40px;
    position:absolute;
    background-color: #f3f3f3;
    height:255px;
    border:5px solid #000;
    z-index: 9002;
    -moz-border-radius: 10px;
    -webkit-border-radius:10px;
    border-radius: 10px;
    margin-left: -155px;
    margin-top: -700px;
}
#popUpDiv a {position:relative; top:0px; right:10px}
/*END CSS POPUP*/

以下是我的php文件中的内容：

<!--POPUP--> 
<script type="text/javascript" src="http://domain.com/js/css-pop.js"></script>

    <div id="blanket" style="display:none;">
    </div>
    <div id="popUpDiv" style="display:none;">


        Pop Up content Here


    </div>
<!-- / POPUP-->

在此处弹出内容

在jscript中有多种方法可以实现您想要实现的功能，但凯迪拉克的方法可能是模式弹出窗口：

位置：修复将解决您的问题。你对position:absolute的使用引起了所有的戏剧性

#popUpDiv {
    padding: 40px;
    position:fixed;
    background-color: #f3f3f3;
    height:255px;
    border:5px solid #000;
    z-index: 9002;
    -moz-border-radius: 10px;
    -webkit-border-radius:10px;
    border-radius: 10px;
}

---

在为popUpDiv提供位置之前，它将根据其在DOM中的位置进行渲染。尝试给它一个顶部：或左侧：样式。此外，如果希望新div位于用户指向的位置（不查看，因为无法检查用户查看的位置；）@Steve H，则可以使用“单击事件位置”来设置新div的位置。我将继续尝试给它一个top:或left:样式。谢谢你的建议，谢谢你。这似乎是获得弹出窗口的一种更简单的方法。现在我只需要找出如何将其合并到当前页面中。我相信您可以下载modal.css并将其添加到网站的css目录中，然后查看示例中index.html中的弹出表单#1和表单#2。还不错。这里有人建议使用光标坐标，这会准确地将光标放在用户浏览的位置，但我个人不喜欢这样，当我需要关闭该窗口时，它会中断浏览体验。一个更好的方法是当我停下来时，将鼠标悬停在关闭的弹出窗口上（就像你在netflix上滚动一部电影时发生的情况）。我很喜欢它，但由于某种原因，它使我所有的嵌入视频都无法显示。这只是视频通常所在的死角。奇怪，我知道，今天晚些时候我会想办法找出是什么导致了这场冲突。谢谢你给我看这个，我以前从没听说过。