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. width: 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. width: 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-width: 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 >157 157.</html>