Question

好的，所以我有一个有几个缩略图的网站。当我点击缩略图时，我会在页面上水平和垂直地弹出一个图像。我想要的是图像相对于浏览器窗口弹出，但如果我使用“固定”位置，它将不会滚动，如果它溢出浏览器窗口。这是我的代码..

#popup_image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 1400px;
z-index: 201;
display: none;
background-repeat: no-repeat;
background-position: center center;
background-image: url(images/fullgraphic3.jpg);
}

<div id="popup_image">
</div>

我希望这样...... Spoon Graphics

无论您点击哪个缩略图或您在页面的下方，它都是相对于浏览器窗口的位置，但滚动时图像也不会滚动。

Answer 1

function center(divid) {
    $(divid).css("position","absolute");
    $(divid).css("top", (($(window).height() - $(divid).outerHeight()) / 2) + $(window).scrollTop() + "px");
    $(divid).css("left", (($(window).width() - $(divid).outerWidth()) / 2) + $(window).scrollLeft() + "px");
    return this;
}

使用方法：

center("#divid");

Answer 2

你可以像这样居中div：

<强> CSS

.popup {
    background:#AAA;
    display:inline;
    float:left;
    height:100px;
    position:fixed;
    width:auto;
    z-index:9999;
}

<强> JS

$(function PopUp(){
    $('.popup').each(function(){
        $(this).css('left',($(window).width()-$(this).outerWidth())/ 2 + 'px');
        $(this).css('top',($(window).height()-$(this).outerHeight())/ 2 + 'px');
    });
});

Demo

jquery弹出图像居中

2 个答案: