CSS+js弹出居中的背景半透明div层
2013-05-21 23:49 Tellme_C# 阅读(317) 评论(0) 编辑 收藏 举报<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
body{margin:0px}
#big{width:100%; height:100%; position:absolute; top:0px; left:0px; right:0px; bottom:0px;background-color:#999;filter: Alpha(opacity=20); -moz-opacity:0.20; opacity:0.20; display:none; z-index:5}
#small{ border:5px solid #CCC; width:400px; padding:10px; position:absolute; top:35%; left:20%; display:none; background:#FFF; z-index:10}
</style>
<script type="text/javascript">
function show()
{
var divBig=document.getElementById("big");
var divSmall=document.getElementById("small");
var v_left=(document.body.clientWidth-divSmall.clientWidth)/2 + document.body.scrollLeft;
var v_top=(document.body.clientHeight-divBig.clientHeight)/2 + document.body.scrollTop;
divBig.style.top=document.body.scrollTop+'px';
divSmall.style.left=(v_left-200)+'px';
divSmall.style.top=(document.body.scrollTop+((document.body.clientHeight/2)-50))+'px';
divBig.style.display="block";
divSmall.style.display="block";
document.body.style.overflow="hidden";
}
</script>
</head>
<body>
<div id="big"></div>
<div id="small">
content
</div>
<button onClick="show()"> please Click me </button>
</body>
</html>
