1 1.<html>
2 2. <head>
3 3. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
4 4. <title>点击弹出窗口网页背景变暗且不可点的效果(div实现)</title>
5 5.<style type="text/css">
6 6.a {
7 7. color: #000;
8 8. font-size: 12px;
9 9. text-decoration: none
10 10.}
11 11.
12 12.a:hover {
13 13. color: #900;
14 14. text-decoration: underline
15 15.}
16 16.
17 17.#massage_box {
18 18. position: absolute;
19 19. left: expression((body.clientWidth-350)/ 2 );
20 20. top: expression((body.clientHeight-200)/ 2 );
21 21. 350px;
22 22. height: 200px;
23 23. filter: dropshadow(color = #666666, offx = 3, offy = 3,positive = 2);
24 24. z-index: 2;
25 25. visibility: hidden
26 26.}
27 27.
28 28.#mask {
29 29. position: absolute;
30 30. top: 0;
31 31. left: 0;
32 32. expression(body.scrollWidth);
33 33. height: expression(body.scrollHeight);
34 34. background: #d3ddea;
35 35. filter: ALPHA(opacity =60);
36 36. z-index: 1;
37 37. visibility: hidden
38 38.}
39 39.
40 40..massage {
41 41. border: orange solid;
42 42. border- 1 1 3 1;
43 43. height: 176px;
44 44. overflow-y: auto;
45 45. background: #fff;
46 46. color: #036;
47 47. font-size: 12px;
48 48. line-height: 150%
49 49.}
50 50.
51 51..header {
52 52. background: orange;
53 53. height: 24px;
54 54. padding: 3 5 0 5;
55 55. color: #fff;
56 56. cursor: move;
57 57.}
58 58.</style>
59 59.
60 60.<!--实现层移动-->
61 61.<script language="javascript">
62 62. var Obj=''
63 63. document.onmouseup=MUp
64 64. document.onmousemove=MMove
65 65.
66 66. function MDown(Object){
67 67. Obj=Object.id
68 68. document.all(Obj).setCapture()
69 69. pX=event.x-document.all(Obj).style.pixelLeft;
70 70. pY=event.y-document.all(Obj).style.pixelTop;
71 71. }
72 72.
73 73. function MMove(){
74 74. if(Obj!=''){
75 75. document.all(Obj).style.left=event.x-pX;
76 76. document.all(Obj).style.top=event.y-pY;
77 77. }
78 78. }
79 79.
80 80. function MUp(){
81 81. if(Obj!=''){
82 82. document.all(Obj).releaseCapture();
83 83. Obj='';
84 84. }
85 85. }
86 86.
87 87. function centerLayer( obj ) {
88 88. var ocw = obj.clientWidth;
89 89. var och = obj.clientHeight;
90 90. var bsl = document.body.scrollLeft || document.documentElement.scrollLeft;
91 91. var bst = document.body.scrollTop || document.documentElement.scrollTop;
92 92. var bcw = document.body.clientWidth || document.documentElement.clientWidth;
93 93. var bch = document.body.clientHeight || document.documentElement.clientHeight;
94 94. var osl = bsl + Math.floor( ( bcw - ocw ) / 2 );
95 95. osl = Math.max( bsl , osl );
96 96. var ost = bst + Math.floor( ( bch - och ) / 2 );
97 97. ost = Math.max( bst , ost );
98 98. obj.style.left = osl + 'px';
99 99. obj.style.top = ost + 'px';
100 100. }
101 101.
102 102. function closeLayer(){
103 103. massage_box.style.visibility='hidden';
104 104. mask.style.visibility='hidden';//关闭子窗口
105 105. }
106 106.
107 107. function openLayer(){
108 108. mask.style.visibility='visible';
109 109. massage_box.style.visibility='visible';
110 110. var obj = document.getElementById('massage_box');
111 111. centerLayer( obj );
112 112. }
113 113.</script>
114 114.
115 115. </head>
116 116. <body>
117 117. <div id="massage_box">
118 118. <div class="header" onmousedown=MDown(massage_box)>
119 119. <table height="24" border="0" cellpadding="0" cellspacing="0"
120 120. width="100%"
121 121. style="color: #fff; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px;">
122 122. <tr>
123 123. <td>用户使用规则</td>
124 124. <td align="right">
125 125. <span onClick="closeLayer();" style="cursor: hand">【确定】</span>
126 126. <span onClick="closeLayer();" style="cursor: hand">【关闭】</span>
127 127. </td>
128 128. </tr>
129 129. </table>
130 130. </div>
131 131. <div class="massage">
132 132. <ul style="margin-right: 25">
133 133. <li>
134 134. 用户必须自行配备上网和使用电信增值业务所需的设备，自行负担个人上网或第三方（包括但不限于电信或移动通信提供商）收取的通讯费、信息费等有关费用。
135 135. </li>
136 136. <li>
137 137. 您同意本服务仅供个人使用且非商业性质的使用，您不可对本服务任何部分或本服务之使用或获得（包括但不限于QQ号码），进行复制、拷贝、出售、或利用本服务进行调查、广告、或用于其他商业目的。
138 138. </li>
139 139. <li>
140 140. 保证自己在使用各服务时用户身份的真实性和正确性及完整性，如果资料发生变化， 您应及时更改。
141 141. </li>
142 142. <li>
143 143. 在安全完成本服务的登记程序并收到一个密码及帐号后，您应维持密码及帐号的机密安全。
144 144. </li>
145 145. </ul>
146 146. </div>
147 147. </div>
148 148. <div id="mask"></div>
149 149. <span onClick="openLayer();" style="cursor: hand"><a href="#">显示提示信息</a>
150 150. <select>
151 151. <option>option1</option>
152 152. <option>option2</option>
153 153. </select>
154 154. </span>
155 155. <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
156 156. </body>
157 157.</html>