实现透明层屏蔽，并且弹出内容层

最新推荐文章于 2024-07-20 23:54:17 发布

iteye_4185

最新推荐文章于 2024-07-20 23:54:17 发布

阅读量82

点赞数

文章标签： xhtml javascript ViewUI

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">

#BgLayer {
background: #939393 none repeat scroll 0 0;
height:100%;
width:100%;
left:0;
top:0;
filter: alpha(opacity=80); /* IE */
-moz-opacity: 0.8; /* Moz + FF */
z-index: 10000;
}

#Layer {
width: 400px;
height: 400px;
margin: -180px 0 0 -170px;
left: 50%;
top: 50%;
position: absolute;
background: #FFF;
z-index: 10001;
border: 1px solid #1B5BAC;
}

</style>

<script type="text/javascript">

/*显示页面*/
function showDiv(id) {
var bg = document.getElementById("BgLayer");
var con = document.getElementById("Layer");
var w = document.documentElement.clientWidth; //网页可见区域宽
var h = document.documentElement.clientHeight;//网页可见区域高
//var w = document.body.scrollWidth; //网页正文全文宽
//var h = document.body.scrollHeight; //网页正文全文高
// alert(w+"-"+h);
bg.style.display = "";
bg.style.width = w + "px";
bg.style.height = h + "px";
con.style.display = "";
}

/*关闭*/
function closeDiv() {
var bg = document.getElementById("BgLayer");
var con = document.getElementById("Layer");
bg.style.display = "none";
con.style.display = "none";

}
</script>
</head>

<body>

<center> <input type="button" value="打开" οnclick="showDiv(1)" style="margin-top:20%" /></center>

<div id="Layer" style="display: none; " >
<input type="button" value="关闭" οnclick="closeDiv()" />
</div>

<div id="BgLayer" style="position:absolute; display: none;"></div>

</body>
</html>

iteye_4185

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
实现透明层屏蔽，并且弹出内容层

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;&lt;head&gt;&lt;
复制链接

扫一扫