编程中国 | 业界新闻 | 技术文章 | 视频教程 | 下载频道 | 程序源码 | 个人空间 | 编程论坛  
 
全能 ASP / PHP / ASP.NET 主机,支持月付专业 MSSQL 数据库空间,支持月付专业 MySQL 数据库空间,支持月付学习型 ASP/PHP/ASP.NET 主机 30元/年
发新话题
打印

整个网页无法操作的效果

整个网页无法操作的效果



如上图所示
当我点击一个按钮或链接时, 出来一个最上面的层(不知道是不是层), 如果不关闭这个层, 整个网页都无法操作, 这种效果怎么实现?
谢谢
附件: 只有本站会员才能下载或查看附件,请您 登录注册

TOP

用一个层将整个页面覆盖,效果设为半透明,关闭最上面的层的同时将这个层关闭

TOP

<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>
相信自己的没错了

TOP

发新话题