用层覆盖整个页面

来源:互联网 发布:樟坑网络 编辑:程序博客网 时间:2024/05/17 22:15

源代码来源:http://www.cnblogs.com/qqflying/archive/2008/02/16/1070799.html

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>用层覆盖整个页面</title>

<script language="javascript">

function test(){

        //弹出层

        document.getElementById("divWaiting").style.display="";

        //覆盖整个页面

        document.getElementById("divDisable").style.display = "";

    }

</script>

</head>

<body>

<%--我需要的覆盖整个页面的层--%>

<div id="MydivDisable" style="display: none; z-index:1; position: absolute;

     width:expression(document.body.offsetWidth); height:expression(document.body.offsetHeight);

     left: 0px; top: 0px;filter:alpha(opacity=50); background-color:White"> </div>

<%--我需要的弹出的层--%>

<div id="MydivWaiting" style="border:0px;display:none; z-index: 1100; position: absolute;">

  <table>

    <tr>

      <td>弹出来的层哦!</td>

    </tr>

  </table>

</div>

 

<%--源代码如下:--%>

 

<%--弹出DIV--%>

<div id="divWaiting" style="display: none; z-index: 1100; left: 25%; right: 25%; position: absolute;

    text-align: center; width: 50%; height: 50px; border-right: #009900 1px solid;

    border-top: #009900 1px solid; border-left: #009900 1px solid; border-bottom: #009900 1px solid;

    background-color: #f9fff6; left: expression((this.offsetParent.clientWidth/2)-(this.clientWidth/2)+this.offsetParent.scrollLeft);

    top: expression((this.offsetParent.clientHeight/2)-(this.clientHeight/2)+this.offsetParent.scrollTop);"> <br>

  The system is dealing with your request, please waiting </div>

 

<%--弄一个全屏的DIV来覆盖页面--%>

<div id="divDisable" style="display: none;width:expression(document.body.offsetWidth);height:expression(document.body.offsetHeight); z-index: 1000; position: absolute;left: 0px; top: 0px;filter:alpha(opacity=50); background-color:White"></div>

 

<input type="button" value="运行" name="test" id="test" onclick="test();"/>

</body>

</html>

 

 

原创粉丝点击