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

xqiang

等级：中级会员
帖子：272
积分：2834
注册：2006-2-23

楼主

整个网页无法操作的效果

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

附件: 只有本站会员才能下载或查看附件，请您登录或注册

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

2008-6-24 11:08

zplove

等级：高级会员
帖子：639
积分：6541
威望：5
注册：2006-7-30

第 3 楼

<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-6-27 17:09

全能ASP/PHP/ASP.NET主机，支持月付	专业 MSSQL 数据库空间，支持月付	专业 MySQL 数据库空间，支持月付	学习型 ASP/PHP/ASP.NET 主机 30元/年
高端软件开发 = 年薪十万不是梦