CSS+js弹出居中的背景半透明div层
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>無標(biāo)題文檔</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>
轉(zhuǎn)載于:https://www.cnblogs.com/hx214blog/archive/2013/05/21/3091950.html
總結(jié)
以上是生活随笔為你收集整理的CSS+js弹出居中的背景半透明div层的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： C#支持中文的格式化字符长度方法
- 下一篇： 剖析ifstream打开含中文路径名文件