如何確定popup div是否在瀏覽器之外

我有很多彈出窗口，我需要將它們放在頁面的任何位置。如何確定popup div是否在瀏覽器之外

我需要的是確定我打開的彈出窗口是否超出瀏覽器的屏幕。如果是這樣，則反轉定位。例如，默認情況下，彈出窗口使用絕對定位top:31px和left:5px。因此，如果彈出框出現在屏幕之外，它應該將「左」反轉爲「右」，以便它保留在瀏覽器中。

這裏是一個演示：http://jsfiddle.net/aspirinemaga/ejyRR/12/

我'肯定它應該已經在這裏得到解答，但我不能找到它。也許有人可以給我發送一個已經回答問題的鏈接。由於

來源

2012-01-11 aspirinemaga

我不是一個jQuery的專家，所以很可能會做到這一點更清潔的方式，但你可以檢查元素的offset加上其width比窗口的寬度：

var x2 = ($this).offset().left + ($this).width() 
if(x2 > $(window).width()){ 
    //change left to right 
}

編輯

，以適應它變成您在的jsfiddle所提供的代碼示例，那麼你可以做到以下幾點：

// Setting correct position for dialog 
$(param).children('.gui-selectbox-dialog').each(function(index) { 
    var x2 = $(this).offset().left + $(this).width(); 
    var side = (x2 > $(window).width()) ? "right" : "left"; 
    $(this).css({ 
     'top': heightBtn, 
     side: '0px' 
    }); 
});

請注意，這在JSFiddle中不起作用，因爲它使用瀏覽器的窗口長度，而不是JSFiddle中的view div的長度。

來源

2012-01-11 10:30:10

感謝您的代碼，但我不能得到它的工作，將嘗試與您的代碼不同的方法。順便說一句，這裏是一個鏈接** [http://www.tweaktown.com/reviews/4464/intel_dx79si_intel_x79_motherboard_review/index.html]（http://www.tweaktown.com/reviews/4464/intel_dx79si_intel_x79_motherboard_review/index.html ）**在哪裏你可以檢查我想達到什麼。如果您將任何圖像懸停在文章中，圖像將彈出並隨鼠標光標移動。但是當它達到特定條件（屏幕邊緣）時，它只會反轉位置值。 – aspirinemaga 2012-01-11 11:09:07

@aspirinemaga對不起，我意識到我錯過了'offset（）'對象的'.left'。你的意思是你不能讓它在JSFiddle中工作，因爲這是可以預料的（因爲我們正在使用窗口大小）。查看我讚揚的答案，瞭解您可以在項目中嘗試的示例代碼。 – 2012-01-11 11:52:46

謝謝，我將在一分鐘內測試它，並會給你我的反饋。 – aspirinemaga 2012-01-11 13:07:00

如何確定popup div是否在瀏覽器之外

回答

相關問題