整个网页无法操作的效果 - JavaScript论坛

xqiang

等　级：新手上路
帖　子：291
专家分：0
注　册：2006-2-23

楼主

问题点数：0 回复次数：3

整个网页无法操作的效果

图片附件: 游客没有浏览图片的权限，请登录或注册

如上图所示
当我点击一个按钮或链接时, 出来一个最上面的层(不知道是不是层), 如果不关闭这个层, 整个网页都无法操作, 这种效果怎么实现?
谢谢

搜索更多相关主题的帖子: 网页　效果　上图　按钮　链接　

2008-06-24 11:08

zplove

等　级：贵宾
威　望：15
帖　子：783
专家分：0
注　册：2006-7-30

第 3 楼

得分:0

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

相信自己的没错了

2008-06-27 17:09