javascript - 动态设置弹出div的位置

Question

我正在寻找关于如何设置通过单击另一个 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>

例如:

1. 如果用户单击 #open div 以显示 #popup div，浏览器窗口滚动条的位置在底部，我想要#popup div 显示在 #open div 的顶部。

2. 但是，如果用户单击“#open”div 以显示 #popup div，浏览器窗口的位置位于顶部，我希望 #popup div 显示在 #open div 的底部。

这是我使用的脚本:

$("#popup").click(function(e) {
     if ($(e.target).closest(".content" /*or any other selector here*/).length > 0){
         return false;
     }
     $("#popup").fadeOut(200);
     $("body").addClass("no-scroll");
});

//This is just to open the popup
$('#open').click(function() {
    $("#popup").show();
}); 

这是带有 css 的完整代码 FIDDLE

Answer 1

检查用户的滚动条位置。然后根据滚动条的位置显示弹出窗口。尚未测试下面的代码，但与此类似。

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
}