我想在单击元素时打开一个灯箱。我已经将位置fixed
赋予灯箱(只是id值固定的div)。这里灯箱id是js示例中的fixed
CSS
#fixed {
position:fixed;
margin:0 auto;
width:50%;
height:50%;
background-color: red;
display: none;
z-index:9999999;
}
#left{
float:left;
width:30%;
}
#right{
float:left;
width:70%;
}
HTML
<div id="fixed">
<div id="left">content</div>
<div id="right">content</div>
</div>
<div id="check">
Open
</div>
<div id="check2">
close
</div>
我使用jQuery垂直居中对齐div
$(document).ready(function(){
var winWidth=$(window).width();
var winHeight= $(window).height();
var divWidth= $('#fixed').width();
var divHeight= $('#fixed').height();
var top = (winHeight/2)-(divHeight/2);
var left = (winWidth/2)-(divWidth/2);
alert(winHeight);
alert(divHeight);
alert(top);
$('#fixed').css('top',top);
$('#fixed').css('left',left);
$('#check').click(function(){
$('#fixed').fadeIn(300);
});
$('#check2').click(function(){
$('#fixed').fadeOut(300);
});
});
上面的fiddle工作得很好,但与我在本地主机中使用的概念相同。那里的窗口大小比jsfiddle大。
div不是垂直居中对齐的。我收到div高度大小大于窗口高度大小的警报,所以它不是放在中心,而是放在底部。
这是我运行脚本时的警报值
798
950
-76
798是我认为的浏览器高度,950是div高度。最终的最高值是-76。
我对此一无所知,即使我已经在css中为lightbox(div)提供了50%的宽度和高度。
为什么我得到了更高的值?我想把它垂直居中,有人能帮忙吗?
我没有看到JSFiddle有任何错误——它正在为我垂直对齐加载。
我唯一的建议是将包含#fixed的元素的高度声明为100%。我认为这可能是本例中的身体元素。这样,固定的div肯定是100%的50%,而不是0%的50%,有些浏览器可能会将其设置为.
我还没有研究过Javascript代码。但由于width
和height
设置为50%
,因此您可以将top
和left
定位在25%
,无需计算
#fixed {
position:fixed;
top: 25%;
left: 25%;
width:50%;
height:50%;
}
参见修改后的JSFiddle