1 <html>
2 <head>
3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
4 <title>可用移动弹层 </title>
5 <style type="text/css">
6 *
7 {
8 margin: 0px;
9 padding: 0px;
10 }
11 body
12 {
13 font-size: 12px;
14 font: Arial, Helvetica, sans-serif;
15 margin: 25PX 0PX;
16 background: #eee;
17 }
18 .botton
19 {
20 color: #F00;
21 cursor: pointer;
22 font-size: large;
23 }
24 .mybody
25 {
26 width: 600px;
27 margin: 0 auto;
28 height: 1500px;
29 border: 1px solid #ccc;
30 padding: 20px 25px;
31 background: #fff;
32 }
33 #cwxBg
34 {
35 position: absolute;
36 display: none;
37 background: #000;
38 width: 100%;
39 height: 100%;
40 left: 0px;
41 top: 0px;
42 z-index: 1000;
43 }
44 #cwxWd
45 {
46 position: absolute;
47 display: none;
48 border: 10px solid #CCC;
49 padding: 10px;
50 background: #FFF;
51 z-index: 1500;
52 }
53 #cwxCn
54 {
55 background: #FFF;
56 display: block;
57 }
58 .imgd
59 {
60 width: 400px;
61 height: 300px;
62 }
63 p
64 {
65 border: 1px solid #13f;
66 height: 300px;
67 }
68 </style>
69 </head>
70 <body>
71 <!--弹层-->
72 <div class="mybody">
73 <div class="botton" id="testClick">
74 点一下</div>
75 <p>
76 这里是网页的内容</p>
77 <div class="botton" id="testClick1">
78 点一下</div>
79 </div>
80 </body>
81 </html>
82 <script type="text/javascript">
83 C$('testClick').onclick = function () {
84 var neirong = '<div><img src="http://images.cnblogs.com/logo.gif" class="imgd" /></div>';
85 cwxbox.box.show(neirong);
86 }
87 C$('testClick1').onclick = function () {
88 var neirong = '呵~O(∩_∩)O~呵';
89 cwxbox.box.show(neirong, 3);
90 }
91
92 function C$(id) { return document.getElementById(id); }
93 //定义窗体对象
94 var cwxbox = {};
95
96 cwxbox.box = function () {
97 var bg, wd, cn, ow, oh, o = true, time = null;
98 return {
99 show: function (c, t, w, h) {
100 if (o) {
101 bg = document.createElement('div'); bg.id = 'cwxBg';
102 wd = document.createElement('div'); wd.id = 'cwxWd';
103 cn = document.createElement('div'); cn.id = 'cwxCn';
104 document.body.appendChild(bg);
105 document.body.appendChild(wd);
106 wd.appendChild(cn);
107 bg.onclick = cwxbox.box.hide;
108 window.onresize = this.init;
109 window.onscroll = this.scrolls;
110 o = false;
111 }
112 if (w && h) {
113 var inhtml = '<iframe src="' + c + '" width="' + w + '" height="' + h + '" frameborder="0"></iframe>';
114 } else {
115 var inhtml = c;
116 }
117 cn.innerHTML = inhtml;
118 oh = this.getCss(wd, 'offsetHeight');
119 ow = this.getCss(wd, 'offsetWidth');
120 this.init();
121 this.alpha(bg, 50, 1);
122 this.drag(wd);
123 if (t) {
124 time = setTimeout(function () { cwxbox.box.hide() }, t * 1000);
125 }
126 },
127 hide: function () {
128 cwxbox.box.alpha(wd, 0, -1);
129 clearTimeout(time);
130 },
131 init: function () {
132 bg.style.height = cwxbox.page.total(1) + 'px';
133 bg.style.width = '';
134 bg.style.width = cwxbox.page.total(0) + 'px';
135 var h = (cwxbox.page.height() - oh) / 2;
136 wd.style.top = (h + cwxbox.page.top()) + 'px';
137 wd.style.left = (cwxbox.page.width() - ow) / 2 + 'px';
138 },
139 scrolls: function () {
140 var h = (cwxbox.page.height() - oh) / 2;
141 wd.style.top = (h + cwxbox.page.top()) + 'px';
142 },
143 alpha: function (e, a, d) {
144 clearInterval(e.ai);
145 if (d == 1) {
146 e.style.opacity = 0;
147 e.style.filter = 'alpha(opacity=0)';
148 e.style.display = 'block';
149 }
150 e.ai = setInterval(function () { cwxbox.box.ta(e, a, d) }, 40);
151 },
152 ta: function (e, a, d) {
153 var anum = Math.round(e.style.opacity * 100);
154 if (anum == a) {
155 clearInterval(e.ai);
156 if (d == -1) {
157 e.style.display = 'none';
158 if (e == wd) {
159 this.alpha(bg, 0, -1);
160 }
161 } else {
162 if (e == bg) {
163 this.alpha(wd, 100, 1);
164 }
165 }
166 } else {
167 var n = Math.ceil((anum + ((a - anum) * .5)));
168 n = n == 1 ? 0 : n;
169 e.style.opacity = n / 100;
170 e.style.filter = 'alpha(opacity=' + n + ')';
171 }
172 },
173 getCss: function (e, n) {
174 var e_style = e.currentStyle ? e.currentStyle : window.getComputedStyle(e, null);
175 if (e_style.display === 'none') {
176 var clonDom = e.cloneNode(true);
177 clonDom.style.cssText = 'position:absolute; display:block; top:-3000px;';
178 document.body.appendChild(clonDom);
179 var wh = clonDom[n];
180 clonDom.parentNode.removeChild(clonDom);
181 return wh;
182 }
183 return e[n];
184 },
185 drag: function (e) {
186 var startX, startY, mouse;
187 mouse = {
188 mouseup: function () {
189 if (e.releaseCapture) {
190 e.onmousemove = null;
191 e.onmouseup = null;
192 e.releaseCapture();
193 } else {
194 document.removeEventListener("mousemove", mouse.mousemove, true);
195 document.removeEventListener("mouseup", mouse.mouseup, true);
196 }
197 },
198 mousemove: function (ev) {
199 var oEvent = ev || event;
200 e.style.left = oEvent.clientX - startX + "px";
201 e.style.top = oEvent.clientY - startY + "px";
202 }
203 }
204 e.onmousedown = function (ev) {
205 var oEvent = ev || event;
206 startX = oEvent.clientX - this.offsetLeft;
207 startY = oEvent.clientY - this.offsetTop;
208 if (e.setCapture) {
209 e.onmousemove = mouse.mousemove;
210 e.onmouseup = mouse.mouseup;
211 e.setCapture();
212 } else {
213 document.addEventListener("mousemove", mouse.mousemove, true);
214 document.addEventListener("mouseup", mouse.mouseup, true);
215 }
216 }
217
218 }
219 }
220 } ()
221
222 cwxbox.page = function () {
223 return {
224 top: function () { return document.documentElement.scrollTop || document.body.scrollTop },
225 width: function () { return self.innerWidth || document.documentElement.clientWidth || document.body.clientWidth },
226 height: function () { return self.innerHeight || document.documentElement.clientHeight || document.body.clientHeight },
227 total: function (d) {
228 var b = document.body, e = document.documentElement;
229 return d ? Math.max(Math.max(b.scrollHeight, e.scrollHeight), Math.max(b.clientHeight, e.clientHeight)) :
230 Math.max(Math.max(b.scrollWidth, e.scrollWidth), Math.max(b.clientWidth, e.clientWidth))
231 }
232 }
233 } ()
234 </script>
浙公网安备 33010602011771号