設置動態彈出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

的一種方式做，這是不是燈箱格，但我可以使用具有翻轉功能和miror功能的下拉列表中自動位置，如何在這裏討論：https://github.com/twbs/bootstrap/issues/10756#issuecomment-41041800

Answer 2

完整的代碼檢查用戶的滾動條位置。然後根據滾動條的位置顯示彈出窗口。沒有測試過下面的代碼，但是類似於這個。

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 3

你可以得到event.offsetX和event.offsetY了「#open」 DIV位置點擊DIV時，那麼你就可以計算出新的座標彈出窗口。

Answer 4

這是一個更加動態的工作解決方案。它查找具有'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/