div遮罩效果

 

<% ... @ page language="java" pageEncoding="GBK" %>

<% ... @ taglib uri="http://struts.apache.org/tags-bean" prefix="bean" %>
<% ... @ taglib uri="http://struts.apache.org/tags-html" prefix="html" %>
<% ... @ taglib uri="http://struts.apache.org/tags-logic" prefix="logic" %>
<% ... @ taglib uri="http://struts.apache.org/tags-tiles" prefix="tiles" %>


<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" >
< html:html  lang ="true" >
< head >
     < html:base  />

     < title > index.jsp </ title >

     < meta  http-equiv ="pragma"  content ="no-cache" >
     < meta  http-equiv ="cache-control"  content ="no-cache" >
     < meta  http-equiv ="expires"  content ="0" >
     < meta  http-equiv ="keywords"  content ="keyword1,keyword2,keyword3" >
     < meta  http-equiv ="description"  content ="This is my page" >
     < script  language ="javascript" > ...
    function Open()
    ...{
          //隐藏select控件
          DispalySelect(0);  
          //显示遮罩层
          document.getElementById("divPageMask").style.display="block";
         //处理遮罩层
          resizeMask();
          window.onResize = resizeMask;
          //显示弹出窗口
          document.getElementById("divOpenWin").style.display="block";
    }
    function Close()
    ...{
          //显示select控件
          DispalySelect(1);
          //处理遮罩层
          divPageMask.style.width = "0px";
          divPageMask.style.height = "0px";
          divOpenWin.style.display = "none";
          window.onResize = null;
      
          document.getElementById("divOpenWin").style.display="none";
    }
    //页面遮罩
    function resizeMask()
    ...{
         divPageMask.style.width = document.body.scrollWidth;
         divPageMask.style.height = document.body.scrollHeight;
         divOpenWin.style.left = ((document.body.offsetWidth - divOpenWin.offsetWidth) / 2);
         divOpenWin.style.top = ((document.body.offsetHeight - divOpenWin.offsetHeight) / 2);
    }
    function DispalySelect(val)
    ...{  //显示和隐藏select控件
         var dispalyType;
          var arrdispalyType=["hidden","visible"];
          var arrObjSelect=document.getElementsByTagName("select");
          for (i=0;i<arrObjSelect.length;i++)
          ...{
            arrObjSelect[i].style.visibility=arrdispalyType[val];
          }
    }
    
    function submit()...{
        var spanName = document.getElementById("spanName");
        var nameText = document.getElementById("nameText");
        var text = document.form1.text;
        if(nameText.value!="")...{
            spanName.innerHTML=nameText.value;
            text.value=nameText.value;
            alert(nameText.value);
            Close();
        }else...{
            spanName.innerHTML="*";
            Close();
        }
    }
    
     </ script >
     < style  type ="text/css" > ...
    .body,td{...}{font-size:12px;}
    .body{...}{filter:alpha(opacity=50);}
    #divBase{...}{z-index:0;height: 100%}
    #divPageMask{...}{z-index:1; background-color:#cccccc; position: absolute; left:0px; top:0px; filter:alpha(opacity=50); height: 100%}
    #divOpenWin{...}{z-index:50; background-color:#EEEEEE; position: absolute; left:0px; top:0px; display: none; width:300px;height:150px}
     </ style >
</ head >

< body >
     < div  id ="divBase" >
         < p  align ="center" >
             < a  href ="javascript:Open();"  onclick ="" > 打开遮罩 </ a >
             < br  />
             < input  type ="button"  value ="button"  onClick ="alert('123123')" >
         </ p >
         < table  height ="450"  width ="95%"  border ="1"  align ="center" >
             < tr >
                 < td  align ="center" >
                    效果
                 </ td >
             </ tr >
             < tr >
                 < td  align ="center" >
                     < form  action ="?"  method ="post"  name ="form1" >
                         < input  type ="text"  value =""  name ="text" >
                     </ form >
                 </ td >
             </ tr >
             < tr >
                 < td  align ="center" >
                     < span  id ="spanName" > * </ span >
                 </ td >
             </ tr >
         </ table >
     </ div >
     < div  id ="divPageMask" ></ div >
     < div  id ="divOpenWin" >
         < table  border ="0"  width ="100%" >
             < tr >
                 < td  align ="center"  colspan ="2" >
                     < a  href ="javascript:Close();" > 关闭 </ a >
                 </ td >
             </ tr >
             < tr >
                 < td  width ="30%"  align ="center" >
                    姓名
                 </ td >
                 < td >
                     < input  type ="text"  id ="nameText" >
                 </ td >
             </ tr >
             < tr >
                 < td >
                     &nbsp;
                 </ td >
                 < td >
                     < input  type ="submit"  value ="提交"  onClick ="submit()" >
                 </ td >
             </ tr >
         </ table >
     </ div >
</ body >
</ html:html >