小编ina*_*out的帖子

我正在寻找有关如何设置弹出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. 如果用户单击#opendiv以显示#popupdiv，而浏览器的窗口滚动条的位置在底部，则我希望该#popupdiv显示在div的顶部#open。

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

这是我使用的脚本：

$("#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的完整代码