jquery - 在浏览器视口(viewport)内保留 jQuery 弹出窗口

Question

我在 JQuery 中弹出图像时遇到一些困难。

这是工作代码的链接: http://jsfiddle.net/aETbw/27/

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

我希望弹出图像保留在视口(viewport)内，且视口(viewport)足够大。

Answer 1

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

$('#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'});
});

在这里查看新的 fiddle :

http://jsfiddle.net/iambriansreed/UBpep/

更新

我更新了我的答案以满足评论中的新要求。上面的 fiddle 链接也已更新。

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();
});​