整个网页无法操作的效果
[attach]35721[/attach]如上图所示
当我点击一个按钮或链接时, 出来一个最上面的层(不知道是不是层), 如果不关闭这个层, 整个网页都无法操作, 这种效果怎么实现?
谢谢 用一个层将整个页面覆盖，效果设为半透明，关闭最上面的层的同时将这个层关闭 <html>
<head>
<script language="javascript" defer>
function showWindow(width,height){
var windowstr="position:absolute;left:0px; top:0px; width:100%; height:100%;background-color:#000000;filter:alpha(Opacity=20)<br>";
windowstr+="<input type='button' style='event:expression(autoResize("+width+","+height+"))' value='关闭' onclick='closeWindow()'>";
document.getElementById("infoDiv").innerHTML=windowstr;
document.getElementById("infoDiv").style.left=((document.body.clientWidth-width)>0?(document.body.clientWidth-width):0)/2+"px";
document.getElementById("infoDiv").style.top=((document.body.clientHeight-height)>0?(document.body.clientHeight-height):0)/2+"px";
document.getElementById("infoDiv").style.width=width;
document.getElementById("infoDiv").style.height=height;
document.getElementById("tranDiv").style.height=document.body.clientHeight+ "px";
document.getElementById("tranDiv").style.width=document.body.clientWidth+ "px";
document.getElementById("tranDiv").style.display="";
document.getElementById("tranDivBack").style.display="";
document.getElementById("infoDiv").style.display="";
}
function closeWindow(){
document.getElementById("tranDiv").style.display="none";
}
autoResize= function(width,height){
document.getElementById("tranDivBack").style.width=document.body.clientWidth>document.body.scrollWidth?document.body.clientWidth:document.body.scrollWidth;
document.getElementById("tranDivBack").style.height=document.body.clientHeight>document.body.scrollHeight?document.body.clientHeight:document.body.scrollHeight;
document.getElementById("tranDiv").style.width=document.body.clientWidth;
document.getElementById("tranDiv").style.height=document.body.clientHeight;
document.getElementById("infoDiv").style.left=((document.body.clientWidth-width)>0?(document.body.clientWidth-width):0)/2+"px";
document.getElementById("infoDiv").style.top=((document.body.clientHeight-height)>0?(document.body.clientHeight-height):0)/2+"px";
document.getElementById("infoDiv").style.width=width<document.body.clientWidth?width:document.body.clientWidth;
document.getElementById("infoDiv").style.height=height<document.body.clientHeight?height:document.body.clientHeight;
}
</script>
<title>测试</title><meta http-equiv="Content-Type" content="text/html; charset=gb2312"></style>
<body bgcolor="#DEF7FF" topmargin="0">
<div style="position:absolute;display:none; left:0px; top:0px;" id="tranDiv">
<div style="position:absolute;left:0px; top:0px; width:100%; height:100%;background-color:#000000;filter:alpha(Opacity=20)" id="tranDivBack">
</div>
<div align='center'style="position:absolute;left:0px; top:0px; width:100%; height:100%;border: 1px solid #0000FF;background-color: #FFFFFF"" id="infoDiv">
</div>
</div>
<form name="fm">
<input type="button" name="show" value="打开窗口" onclick="showWindow(900,100)"/>
<div class="subtable option">
<div style="MARGIN: 6px">
<label>
<input type="text" name="textfield" />
</label>
</div>
</div>
</form>
</body>
</html>
页:
[1]