微调我的灯箱

Question

所以我有一个简单的灯箱，代码如下：

jquery代码：

var $overlay =$('<div class="overlay"></div>');

$('body').append($overlay);

$('img').click(function(){
$overlay.show();
});

的CSS：

   .overlay {
    width: 100%;
    height:100%;
    background:grey;
    display:none;
position: absolute;
top:0;
    }

这显然很简单我没有写过很多代码，除了点击图像时会出现的叠加并触发灯箱。

以下是我的问题：

1. 我的网页比屏幕长，当我的灯箱被触发时，我可以使用什么代码来停止屏幕滚动。

2. 是否可以将灯箱$ overlay设置为仅填充视图中的屏幕。因此，只占用当前屏幕视图中的网页部分。我的图像分布在网页上，而且当触发灯箱时，我希望它只填充屏幕的那一部分。

Answer 1

好吧，我决定发一个答案，希望它会对你有所帮助 首先，您的JavaScript。从您发布的JS中，看起来您对每个图像使用不同的.overlay。不需要。
只需制作一个叠加层：

<div class="overlay"><img src="#" width="500"/></div>

然后，在您点击网页上的图片时设置图片src：

$('img').click(function(){
    var src = $(this).attr('src');//Gets the image you clicked on src
    $('.overlay').fadeIn();//Fades in the overlay
    $('.overlay img').attr('src',src).css('margin-top',($(window).height() - $('.overlay img').height()-20)/2);//Sets the overlay image to the correct source, and centers the image. -20 is for the border
});
$('.overlay').click(function(){
    $(this).fadeOut();// And fades out the overlay on click
});

简单易行。现在问你的实际问题 你将如何通过CSS实现你想要的目标 首先，将body和html的高度和宽度设置为100％，然后删除边距。这会阻止叠加制作滚动条：

body, html{
    width:100%;
    height:100%;
    margin:auto;
}

然后，要在您点击的图片上显示叠加层，请将position:absolute;更改为position:fixed;：

.overlay {
    width: 100%;
    height:100%;
    background:grey;
    display:none;
    position: fixed;
    top:0;
    text-align:center;
    cursor:pointer;
}

添加一点CSS以使其看起来漂亮：

.overlay img{
    border-radius:5px;
    border:10px solid white;
    box-shadow: 0 0 5px black;
}

和邦！

JSFiddle Demo

Make sure you check out the coding in this JSFiddle