Question

我有很多弹出窗口，我需要在页面上的任何地方放置。

我需要的是确定我打开的弹出窗口是否超出了浏览器的屏幕。如果是这样，反转定位。例如，默认情况下，弹出窗口使用top:31px和left:5px的绝对定位。因此，如果弹出框移出屏幕，它应该将“左”反转为“右”，以便它保留在浏览器中。

以下是演示：http://jsfiddle.net/aspirinemaga/ejyRR/12/

我确定它应该已经在这里得到解答，但我找不到它。也许有人可以给我一个已回答问题的链接。感谢

Answer 1

我不是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的长度。

如何确定popup div是否在浏览器之外

1 个答案: