弹出层(Div)屏蔽父窗口并且让父窗口变暗 .

01.<html> 
02.<head> 
03.    <mce:script type="text/javascript"><!-- 
04.    
05.  function   locking(){    
06.  document.all.ly.style.display="block";    
07.  document.all.ly.style.width=document.body.clientWidth;    
08.  document.all.ly.style.height=document.body.clientHeight;    
09.  document.all.Layer2.style.display='block';    
10.  }    
11.  function   Lock_CheckForm(theForm){    
12.  document.all.ly.style.display='none';document.all.Layer2.style.display='none'; 
13.  return   false;    
14.  }    
15.     
16.// --></mce:script> 
17. 
18.</head> 
19.<body> 
20.     
21.    <p align="center"> 
22.        <input type="button" value="系统锁定" onclick="locking()"> 
23.    </p> 
24.    <div id="ly" style="position: absolute; top: 0px; filter: alpha(opacity=60); background-color: #777; 
25.        z-index: 2; left: 0px; display: none;"> 
26.    </div> 
27.    <!--         浮层框架开始         --> 
28.    <div id="Layer2" align="center" style="position: absolute; z-index: 3; left: expression((document.body.offsetWidth-540)/2); top: expression((document.body.offsetHeight-170)/2); 
29.        background-color: #fff; display: none;" > 
30.        <table width="540" border="0" cellpadding="0" cellspacing="0" style="border: 0   solid   #e7e3e7; 
31.            border-collapse: collapse" mce_style="border: 0   solid   #e7e3e7; 
32.            border-collapse: collapse"> 
33.            <tr> 
34.                <td style="background-color: #73A2d6; color: #fff; padding-left: 4px; padding-top: 2px; 
35.                    font-weight: bold; font-size: 14px;" mce_style="background-color: #73A2d6; color: #fff; padding-left: 4px; padding-top: 2px; 
36.                    font-weight: bold; font-size: 14px;" height="27" valign="middle"> 
37.                    [ 警 告 ] 
38.                </td> 
39.            </tr> 
40.            <tr> 
41.                <td height="130" align="center"> 
42.                    <input type="button" value=" 确定 " onclick="Lock_CheckForm(this);"> 
43.                </td> 
44.            </tr> 
45.        </table> 
46.    </div> 
47.    <!--         浮层框架结束         --> 
48.</body> 
49.</html> 

你可能感兴趣的:(div)