js弹出新的界面对话框
function show() //显示隐藏层和弹出层 { var hideobj = document.getElementById("hidebg"); hidebg.style.display = "block"; //显示隐藏层 hidebg.style.height = document.body.clientHeight + "px"; //设置隐藏层的高度为当前页面高度 document.getElementById("hidebox").style.display = "block"; //显示弹出层 }; function hide() //去除隐藏层和弹出层 { document.getElementById("hidebg").style.display = "none"; document.getElementById("hidebox").style.display = "none"; };
<style> body { margin:0px;padding:0px;text-align: center;} #hidebg { position:absolute;left:0px;top:0px; background-color:#000; width:100%; /*宽度设置为100%,这样才能使隐藏背景层覆盖原页面*/ filter:alpha(opacity=60); /*设置透明度为60%*/ opacity:0.6; /*非IE浏览器下设置透明度为60%*/ display:none; /* http://www.jb51.net */ z-Index:2;} #hidebox { position:absolute;width:400px;height:300px;top:200px;left:30%;background-color:#fff;display:none;cursor:pointer;z-Index:3;} #content { text-align:center;cursor:pointer;z-Index:1;} </style>
<div id="hidebg"></div> <div id="hidebox" onClick="hide();">点击关闭</div> <div id="content" onClick="show();">点击试试</div>