您的位置：首页 > 其它

一个简单的遮罩层效果

2009-06-17 17:27 225 查看

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>

演示

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="

";
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";
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航