Javascript 动态设置弹出div的位置

我正在寻找一个解决方案，如何设置弹出div的位置，该位置通过单击另一个div显示，但其位置取决于窗口的位置

下面是我的一些div示例：

 <div id="header"></div>

 <div id="open">Click here to open the popup</div>

 <div id="popup">
      <div class="popup-wrapper">
          <div class="content">
             <h1>TEST</h1>
          </div>
      </div>
 </div>

 <div id="footer"></div>

---

以下是使用css检查用户滚动条位置的完整代码。然后根据滚动条的位置显示弹出窗口。我没有测试下面的代码，但类似于此

var scrollTop = (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop;

if(scrollTop == 0){
   // Window on top. Display popup
}

if(scrollTop == $(window).height()){
   // Window on bottom. Display popup
} 

---

单击div时，可以使用event.offsetX和event.offsetY获得“#open”div位置，然后可以计算弹出窗口的新坐标。

这里是一个更动态的工作解决方案。它查找具有“popupSection”类的任何元素，并在其上打开弹出窗口

$('.popupSection').on('click',function(e){
    var target = $(e.target);
    var targetOffset = target.offset().top;
    var scrollPosition = $(window).scrollTop();
    if ( scrollPosition <= targetOffset ) {
        openPopup(targetOffset);
    } else {
        var targetHeight = target.height();
        var contentHeight = $('#popup .content').outerHeight();
        var targetBottomOffset = targetOffset + targetHeight - contentHeight;
        openPopup(targetBottomOffset);
    }    
});

var openPopup = function(offset){
    var popup = $('#popup');
    var popupContent = $('#popup .content');
    if ( popup.css('display') === 'none' ) {
        popup.css('display','block');
    }
    popupContent.css('top',offset);    
}

$("#popup").click(function(e) {    
    $("#popup").fadeOut(200);
});

$（'.popupSection'）。在（'click'，函数（e）上{
var目标=$（e.target）；
var targetOffset=target.offset（）.top；
var scrollPosition=$（window.scrollTop（）；
如果（scrollPosition实现这一点的一种方法不是通过light box div，但我可以使用一个下拉自动位置，带有flip功能和miror功能，如本文所述：
您可以检查滚动条的位置并相应地显示弹出窗口。几乎在那里，但当用户单击弹出窗口div时，它不会关闭div。我不会更新。）他用你的提琴。这是一个更新的提琴，当用户在弹出窗口外单击时关闭弹出窗口：我发现代码仍然没有按我所希望的方式工作。下面是一个场景：在提琴中，有两种颜色，黄色和灰色。如果“灰色div”在窗口底部，我希望弹出窗口div显示在窗口的上层这就是灰色。但是，如果灰色在窗口顶部，我希望“弹出div”显示在灰色的吼叫中。请。我对“楼上”这个词在编程上不太熟悉……但这就是你想要的吗？更新的小提琴：请看下面的一些屏幕截图。请看我发布的屏幕截图在这一页下面。你能给我一个如何排列代码的例子吗。请看一下我在这一页下面贴的一些照片。提前谢谢。
$('.popupSection').on('click',function(e){
    var target = $(e.target);
    var targetOffset = target.offset().top;
    var scrollPosition = $(window).scrollTop();
    if ( scrollPosition <= targetOffset ) {
        openPopup(targetOffset);
    } else {
        var targetHeight = target.height();
        var contentHeight = $('#popup .content').outerHeight();
        var targetBottomOffset = targetOffset + targetHeight - contentHeight;
        openPopup(targetBottomOffset);
    }    
});

var openPopup = function(offset){
    var popup = $('#popup');
    var popupContent = $('#popup .content');
    if ( popup.css('display') === 'none' ) {
        popup.css('display','block');
    }
    popupContent.css('top',offset);    
}

$("#popup").click(function(e) {    
    $("#popup").fadeOut(200);
});