一个简单的遮罩层效果
一个简单的遮罩层效果
Code<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>一个简单的遮罩层效果</title>
<script language="javascript">
function openwin() {
if(document.getElementById("mywinOut") == undefined) {
var winOut = document.createElement("div");
winOut.setAttribute("id","mywinOut");
winOut.style.zIndex="98";
winOut.style.left = "0";
winOut.style.top = "0";
winOut.style.width = document.body.scrollWidth;
winOut.style.height = document.body.scrollHeight;
winOut.style.position = "absolute";
winOut.style.background = "#cccccc";
winOut.style.filter="alpha(opacity=60)";
winOut.style.opacity="0.4";
document.body.appendChild(winOut);
var winIn = document.createElement("div");
winIn.setAttribute("id","mywinIn");
winIn.style.zIndex="99";
winIn.style.left = document.body.clientWidth/2 - 200;
winIn.style.top = document.body.scrollTop + 150;
winIn.style.width = 400+"px";
winIn.style.height = 400+"px";
winIn.style.position = "absolute";
winIn.style.background = "#ffffff";
winIn.innerHTML="<center><br><br><br><input type='button' onclick='closewin()' value='关闭'/></center>";
document.body.appendChild(winIn);
} else {
document.getElementById("mywinOut").style.display = "block";
document.getElementById("mywinIn").style.display = "block";
}
}
function closewin() {
document.getElementById("mywinOut").style.display = "none";
document.getElementById("mywinIn").style.display = "none";
}
</script>
</head>
<body>
<center>
<input type="button" onclick="openwin()" value="弹出"/>
<div style="height=1000px"></div>
</center>
</body>
</html>
演示
