如何确定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是否在浏览器之外

回答

相关问题