如何修复此灯箱？

本文介绍了如何修复此灯箱？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我现在已经用灯箱砸了好头，好像没什么好看的。我需要它，当我点击照片链接只是弹出，图像居中并让覆盖填充屏幕，简单吧？然而，覆盖层变成透明灰色的垂直柱，仅填充屏幕的中间，并且图像紧贴在它的顶部以获得亲爱的生命。我曾经玩过这个东西，但它已经有一段时间了，我不知道我做错了什么，下面是html，css和java脚本代码，任何帮助都将不胜感激

HTML：

Swift Mile也有黑色可用

Hi, I've been wreaking my head with light-box for a good while now and nothing seems to help. I need it to, when i click the photo link to just pop up, image centered and have the overlay fill the screen, simple right? However the overlay turns into a vertical pillar of transparent grey, only filling the middle of the screen, and the image clings to the top of it for dear life. I used to play around with this stuff but it's been a while and I have no idea what it is that I'm doing wrong, below is the html,css and java-script code, any help would be greatly appreciated

HTML:

Swift Mile Also Available In Black

< img src =iamges / mens / clarks / swiftmile .jpg>

也有黑色可供选择

Also Available in black

CSS：

/ *样式灯箱，将其从视线中移除并添加淡入淡出物 - 过渡期* /

.lightbox-target {

持仓：固定;

顶部：-100％ ;

宽度：50％;

身高：100％;

背景：rgba（0,0,0，.7）;

宽度：50％;

不透明度：0;

-webkit-transition：opacity .5s easy-in-out;

-moz-transition：opacity .5s easy-in-out;

-o-transition：opacity .5s ease-in-out;

过渡：不透明度.5s轻松进出;

z-index：9999;

溢出：自动;

}

/ *为灯箱图像设置样式，使其垂直和水平居中，添加放大过渡并使用边距和绝对定位的组合使其响应* /

.lightbox-target img {

保证金：自动;

持仓：绝对;

top：0 ;

左：0;

右：0;

底部：0;

最大高度：0 ％;

最大宽度：0％;

边框：3px纯白色;

box-shadow：0px 0px 8px rgba（0， 0,0，.3）;

box-sizing：border-box;

-webkit-transition：.5轻松进出;

-moz-transition：.5s轻松进出;

-o-transition：.5s轻松进出;

过渡：.5s轻松进出;

}

/ *样式关闭链接，添加下滑过渡* /

a.lightbox-close {

显示：块;

宽度： 50px;

身高：50px;

盒子大小：边框盒子;

背景：白色;

颜色：黑色;

文字装饰：无;

位置：绝对;

顶部：-90px;

右：0;

-webkit-transition：.5s easy-in-out;

-moz-transition：.5s easy-in-out;

-o-transition：.5s easy-in-out;

过渡：.5s轻松进出;

}

/ *提供部分X以消除关闭链接中的图像* /

a.lightbox-关闭：在{

内容：;

显示：块;

高度：30px;

宽度之前：1px;

ba ckground：black;

position：absolute;

left：26px;

top：10px;

-webkit -transform：rotate（45deg）;

-moz-transform：rotate（45deg）;

-o-transform：rotate（45deg）;

变换：旋转（45度）;

}

/ *提供部分X以消除关闭时的图像链接* /

a.lightbox-close：在{

内容：;

显示：块;

高度：30px;

宽度：1px;

背景：黑色;

border：black;

仓位：绝对;

剩余：26px;

顶部：10px;

-webkit-transform：rotate （-45deg）;

-moz-transform：rotate（-45deg）;

-o-transform：rotate（-45deg）;

变换：旋转（-45deg）;

}

/ *使用：target伪类在单击时执行动画.lightbox-target anchor * /

.lightbox-target：target {

不透明度：1;

顶部：0;

底部：0;

}

.lightbox-target：target img {

max-height：100％;

max-width：100％;

}

.lightbox-target：target a.lightbox-close {

top：50px;

}

JAVASCRIPT：

< script src =http://ajax.googleapis.com/ ajax / libs / jquery / 1.10.2 / jquery.min.jstype =text / javascript>< / script>

< script type =text / javascript>

$（document）.ready（function（）{

$（'。grid-nav li a'）。on（'click'，function（event）{

event.preventDefault（）;

$（'。grid-container'）。fadeOut（500，function（）{

$（ '＃'+ gridID）.fadeIn（500）;

}）;

var gridID = $（this）.attr（data-id）;

$（'。grid-nav li a'）。removeClass（active）;

$（this）.addClass（active ）;

}）;

}）;

< / script>

CSS:

/* Styles the lightbox, removes it from sight and adds the fade-in transition */

.lightbox-target {
position: fixed;
top: -100%;
width: 50%;
height:100%;
background: rgba(0,0,0,.7);
width: 50%;
opacity: 0;
-webkit-transition: opacity .5s ease-in-out;
-moz-transition: opacity .5s ease-in-out;
-o-transition: opacity .5s ease-in-out;
transition: opacity .5s ease-in-out;
z-index:9999;
overflow: auto;
}

/* Styles the lightbox image, centers it vertically and horizontally, adds the zoom-in transition and makes it responsive using a combination of margin and absolute positioning */

.lightbox-target img {
margin: auto;
position: absolute;
top: 0;
left:0;
right:0;
bottom: 0;
max-height: 0%;
max-width: 0%;
border: 3px solid white;
box-shadow: 0px 0px 8px rgba(0,0,0,.3);
box-sizing: border-box;
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
}

/* Styles the close link, adds the slide down transition */

a.lightbox-close {
display: block;
width:50px;
height:50px;
box-sizing: border-box;
background: white;
color: black;
text-decoration: none;
position: absolute;
top: -90px;
right: 0;
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
}

/* Provides part of the "X" to eliminate an image from the close link */

a.lightbox-close:before {
content: "";
display: block;
height: 30px;
width: 1px;
background: black;
position: absolute;
left: 26px;
top:10px;
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-o-transform:rotate(45deg);
transform:rotate(45deg);
}

/* Provides part of the "X" to eliminate an image from the close link */

a.lightbox-close:after {
content: "";
display: block;
height: 30px;
width: 1px;
background: black;
border:black;
position: absolute;
left: 26px;
top:10px;
-webkit-transform:rotate(-45deg);
-moz-transform:rotate(-45deg);
-o-transform:rotate(-45deg);
transform:rotate(-45deg);
}

/* Uses the :target pseudo-class to perform the animations upon clicking the .lightbox-target anchor */

.lightbox-target:target {
opacity: 1;
top: 0;
bottom: 0;
}

.lightbox-target:target img {
max-height: 100%;
max-width: 100%;
}

.lightbox-target:target a.lightbox-close {
top: 50px;
}

JAVASCRIPT:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.grid-nav li a').on('click', function(event){
event.preventDefault();
$('.grid-container').fadeOut(500, function(){
$('#' + gridID).fadeIn(500);
});
var gridID = $(this).attr("data-id");

$('.grid-nav li a').removeClass("active");
$(this).addClass("active");
});
});
</script>

html

如何修复此灯箱？

问题描述

推荐答案