在浏览器视口中保留jQuery弹出窗口

我在JQuery中使用弹出图像时遇到了一些困难

以下是工作代码的链接：

如果您将鼠标悬停在小相机图标上，会弹出一张照片

---

我希望弹出图像保持在视口内，视口足够大。

您必须检查以确保图像弹出窗口及其偏移量不超过内容区域。如果是，则将图像弹出窗口定位为右对左。在实际图像加载之前，您无法获得图像弹出窗口的真实宽度。加载后，请运行宽度检查

$('#imgPop').css({'left':x+'px','top':y+'px'}).show();
$('#imgPop img').load(function(){
    if($('#imgPop img').width() + x > $('#mainContent').width())
        $('#imgPop').css({'left':'','right':'0px'});
});

请看这里的新小提琴：

更新

我更新了我的答案，以满足评论中的新要求。上面的小提琴链接也会更新

var hide_popup_timeout = setTimeout(function(){},0);
function hide_popup(){
    clearTimeout(hide_popup_timeout);
    hide_popup_timeout = setTimeout(function(){
        $('#imgPop').hide();
        $('#imgPop img').attr('src','');
    },500);
}

$('#article_list img').hover(function(event) {

    clearTimeout(hide_popup_timeout);

    var x = 30;//$(this).offset().left + 30;
    var y = 50;//$(this).offset().top + $(this).height();
    $('#imgPop').css({'left':x+'px','top':y+'px'});
    $('#imgPop img').attr('src', $(this).attr('rel'));
    $('#imgPop img').load(function(){
        if($('#imgPop img').width() + x > 
           $('#article_list').width())
            $('#imgPop').css({'left':'','right':'0px'});
    });
    $('#imgPop').show();

},function(){
    hide_popup();         
});

$('#imgPop').hover(function(){
    clearTimeout(hide_popup_timeout );
},function(){
    hide_popup();
});​

---

“viewport”是什么意思（我在JSFIDLE中没有看到这个词）？另外，你能进一步解释一下“视口足够大的位置”吗？对不起，我指的是浏览器窗口。因此，如果代码生成的x和y值将图像移动到可见边缘之外，如果图像将延伸到浏览器窗口底部之外，则将图像向上移动，如果图像将延伸到右侧边缘之外，则将图像向左移动，依此类推。当我说“视口足够大的位置”时，我的意思是，当视口小于照片本身时，在这种情况下，不可避免地会出现一些过度旋转。但是假设照片是400px乘400px，它将从浏览器窗口的右边缘以200px的速度出现，它将以200px的速度向左移动，这样整个图像都是可见的。除非浏览器窗口只有300px，否则100px的图像无论如何都不可见。为我最初的解释道歉！感谢您的关注：）+1用于JSFIDLE。使解决方案变得更加简单。我还清理了fiddle示例中的一些jQuery。Hi@iambriansreed。那看起来像是我要找的！只有几件事我还在苦苦挣扎：如果它碰到浏览器窗口的底部或顶部，我希望它也能做同样的事情。我稍微更新了标记并删除了注释-我无法正确阅读：）另一件事是，我想我需要编辑默认坐标，使它们为x30px和y50px。如果我这样做，图像与指针重叠并消失，因为我猜，它不再在小相机图像上悬停。如果指针也悬停在图像上，有没有办法强制图像保持显示？哎呀，我忘了在

中添加
• 标签了！这里有一个新功能：手动将弹出窗口设置为30x50打开，无需确保它不会从页面上消失。至此，我已经回答了您最初的问题和其他几个问题。：）