层的效果-灯箱效果
——————————————————————
<script type="text/javascript">
//监听显示灯箱层的按钮事件
function showLightBox(){
//获取层box的DOM
var box = document.getElementById('box');
box.style.display = 'block'; //显示层
h = box.offsetHeight; //计算得到层的实际高度
var img = document.getElementById('pic1');//得到中心图片的DOM
img.style.top = (h/2)+'px'; //把它的高度居中
}
//关闭事件的函数
function closeLightBox(){
//获取层box的DOM
var box = document.getElementById('box');
box.style.display = 'none';//隐藏层
}
</script>
————————————————————————
<style>
#box{
position: absolute;
left:0;
top:0;
z-index: 99;
border: 1px solid red;
width:100%;
height:100%;
background-color: gray;
margin: 0 auto;
display: none;
}
#box img{
position: relative;
}
#closeBtn{
position: absolute;
top: 5px;
right: 5px;
}
</style>
————————————————————————
<body style="text-align:center">
<p>文字文字...</p>
<p>
<input type="button" value="show" onclick="showLightBox()"/>
</p>
<div id="box">
<img src="1.jpg" id="pic1"/>
<a href="javascript:closeLightBox();" id="closeBtn">关闭</a>
</div>
</body>
——————————————————————————
