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>

例如：

如果用户点击#open div以显示#popup div与底部浏览器窗口滚动条的位置，我希望{{1} } div显示在#popup div的顶部。
但是，如果用户点击了＃open;＃open＆＃39; div显示#open div与浏览器窗口的位置在顶部，我希望#popup div显示在#popup div的底部。

以下是我使用的脚本：

#open

以下是css FIDDLE

Answer 1

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

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
}

Answer 2

这是一个更动态的工作解决方案。它会查找具有'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);
});

工作小提琴：http://jsfiddle.net/epbdZ/2/

Answer 3

你可以得到＃34;＃open＆＃34;单击div时，使用event.offsetX和event.offsetY进行div位置，然后可以为弹出窗口计算新坐标。

Answer 4

执行此操作的一种方法不是通过灯箱div，但我可以使用具有翻转功能和镜像功能的下拉式自动位置，如下所述：https://github.com/twbs/bootstrap/issues/10756#issuecomment-41041800

动态设置弹出div的位置

4 个答案: