<html>
<head>
<title>弹出一个窗口后,后面的层不可操作 ,点击确定之后跳转新的页面</title>
<script>
function show() //显示隐藏层和弹出层
{
var hideobj=document.getElementById("hidebg");
hidebg.style.display="block"; //显示隐藏层
hidebg.style.height=document.body.clientHeight+"px"; //设置隐藏层的高度为当前页面高度 px是后缀
document.getElementById("hidebox").style.display="block"; //显示弹出层
}
function hide() //去除隐藏层和弹出层
{
document.getElementById("hidebg").style.display="none";
document.getElementById("hidebox").style.display="none";
}
function open_()
{
window.location.href="http://www.hpu.edu.cn";
}
</script>
<style>
body { margin:0px;padding:0px;text-align: center;}
#hidebg { position:absolute;left:0px;top:0px;
background-color:#002;
width:100%; /*宽度设置为100%,这样才能使隐藏背景层覆盖原页面*/
filter:alpha(opacity=30); /*设置透明度为60%*/
opacity:0.3; /*非IE浏览器下设置透明度为60%*/
display:none; /* http://www.jb51.net */
z-Index:2;}
#hidebox { position:absolute;border:1px solid #99CCFF;width:400px;height:150px;top:200px;left:30%;background-color:#fff;display:none;z-Index:3;}
#content { text-align:center;cursor:pointer;z-Index:1; }
.button1{float: right;cursor:pointer;}
.button1:hover{background-color:#c75050;color:white;}
.button2{background-color:#6a9f3f; font-size:18px;}
#hidebox .p1{background-color:#336699;width:100%;border:1px solid silver;float:left;margin-top:0px;}
#hidebox
</style>
</head>
<body>
<div id="hidebg"></div>
<div id="hidebox"><p class="p1"><input class="button1" type="button" value="×" onClick="hide();"></p>
<p>是否继续?</p>
<input class="button2" type="button" value="取消" onClick="hide()">
<input class="button2" type="button" value="确定" onClick="open_()">
</div>
<div id="content" onClick="show();">点击试试</div>
</body>
</html>