jquery弹出图像居中 [英] jquery popup image centering

问题描述

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

ok so I have a site that has several thumbnails. When I click a thumbnail I have an image that pops up centered horizontally and vertically on the page. What I want is for image to pop up relative to the browser window but if I use position "fixed" it won't scroll if it overflows past the browser window. Here is my code..

#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

无论使用什么缩图

推荐答案

您可以在浏览器窗口中滚动图片，中心div如此：

You can center divs like so:

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

演示

这篇关于jquery弹出图像居中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！