预知效果如何，查看源代码，预览效果：
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
2 <html>
3 <head>
4 <title></title>
5 <!-- 样式 -->
6 <style type="text/css">
7 /* div的 position 为 absolute 就都取绝对定位，所有的div就会叠在一起 */
8 /* 页面加载的时候遮罩div 和 消息 div 不显示，点击显示后再显示 */
9 /* 由于用第二个div来挡住页面所以第二个div的宽度和高度都是100% */
10 #divMain
11 {
12 width:1024px;
13 height:600px;
14 margin:0 auto;
15 padding:20px;
16 background-color:#ccc;
17 z-index:1;//设置div层所处的位置
18 position:absolute;
19 }
20 #divLayer
21 {
22 width:100%;
23 height:100%;
24 background-color:#eee;
25 filter:alpha(opacity=30);/*设置半透明效果*/
26 opacity:0.3;/*透明度*/
27 z-index:2;/*设置div层所处的位置*/
28 position:absolute;
29 display:none;
30 cursor:not-allowed;
31 }
32 #divMsg
33 {
34 margin-top:10%;
35 width:240px;
36 height:100px;
37 line-height:10px;
38 text-align:center;
39 margin-left:40%;
40 position:absolute;
41 display:none;
42 background-color:white;
43 border:2px solid yellow;
44 z-index:3;/*设置div层所处的位置*/
45 }
46 .btn
47 {
48 border:4px solid yellow;
49 font-family:微软雅黑;
50 font-size:12px;
51 }
52 </style>
53
54 <!-- 控制脚本 -->
55 <script language="javascript">
56 function showMsg(){
57 /* 得到遮罩div && 消息div */
58 var _divLayer=document.getElementById("divLayer");
59 var _divMsg=document.getElementById("divMsg");
60 _divLayer.style.display="block";
61 _divMsg.style.display="block";
62 }
63 function logout(){
64 var _divLayer=document.getElementById("divLayer");
65 var _divMsg=document.getElementById("divMsg");
66 _divLayer.style.display="none";
67 _divMsg.style.display="none";
68 alert("login successfull!");
69 }
70 </script>
71 </head>
72 <body>
73
74
75 <!-- 遮罩用的div -->
76 <div id="divLayer">
77
78 </div>
79
80 <!-- 消息div -->
81 <div id="divMsg">
82 <div style="margin-top:7px;">username:<input type="text" id="userName" maxLength="16"/></div>
83 <div style="margin-top:6px;">userpass:<input type="password" id="userPass" maxLength="16"/></div>
84 <div style="margin-top:8px;">
85 <input type="button" value="login" onclick="logout();"/>
86 <input type="button" value="exit" onclick="logout();"/>
87 </div>
88 </div>
89 <!-- 正常的div -->
90 <div id="divMain">
91 <input type="button" value=" 登 录 " id="btnLogin" class="btn" onclick="showMsg();"/>
92 </div>
93 </body>
94 </html>