003.<head>
004.<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
005.<title>Untitled Document</title>
006.</head>
007.<script>
008.
009.
010.
011.
012.
013.
014.
015.
016.
017.
018.function MessageBox() {
019.
020. var self = this;
021.
022. this.width;
023. this.height;
024. this.x;
025. this.y;
026. this.xOffSet;
027. this.yOffSet;
028.
029.
030. this.messageDiv = document.createElement('div');
031. this.titleDiv = document.createElement('div');
032. this.titleSpanText = document.createElement('span');
033. this.titleSpanButton = document.createElement('span');
034. this.closeButton = document.createElement('input');
035. this.closeButton.type = 'button';
036. this.textDiv = document.createElement('div');
037. this.buttonDiv = document.createElement('div');
038. this.button = document.createElement("input");
039. this.button.type = "button";
040.
041.
042. this.messageDiv.appendChild(this.titleDiv);
043. this.titleDiv.appendChild(this.titleSpanText);
044. this.titleDiv.appendChild(this.titleSpanButton);
045. this.titleSpanButton.appendChild(this.closeButton);
046. this.messageDiv.appendChild(this.textDiv);
047. this.messageDiv.appendChild(this.buttonDiv);
048. this.buttonDiv.appendChild(this.button);
049.
050.
051.
052.
053.
054.
055.
056.
057.
058.
059.
060.
061.
062.
063.
064.
065.
066.
067.
068.
069.
070.
071.
072. this.show = function(width, height, title, text, button, locX, locY, messageDivClass, titleDivClass, textDivClass, buttonClass) {
073.
074.
075. this.width = width;
076. this.height = height;
077. this.titleSpanText.innerHTML = title;
078. this.textDiv.innerHTML = text;
079. this.button.value = button;
080. this.closeButton.value = ' X ';
081.
082.
083. if (!locX) {
084. this.messageDiv.style.left = this.getCenterX() + 'px';
085. }
086. else {
087. this.messageDiv.style.left = locX + 'px';
088. }
089.
090. if (!locY) {
091. this.messageDiv.style.top = this.getCenterY() + 'px';
092. }
093. else {
094. this.messageDiv.style.top = locY + 'px';
095. }
096.
097.
098. this.setMessageDivStyle(messageDivClass);
099. this.setTitleDivStyle(titleDivClass);
100. this.setFloatStyle(this.titleSpanText, 'left');
101. this.setFloatStyle(this.titleSpanButton, 'right');
102. this.setCloseButtonStyle();
103. this.setTextDivStyle(textDivClass);
104. this.setButtonDivStyle();
105. this.setButtonStyle(buttonClass);
106.
107.
108. this.titleDiv.onmousedown = this.drag;
109. this.titleDiv.onmouseup = this.drop;
110. this.button.onclick = this.close;
111. this.closeButton.onclick = this.close;
112.
113.
114. var body = document.getElementsByTagName('body').item(0);
115. body.appendChild(this.messageDiv);
116. this.messageDiv.style.display = 'block';
117.
118. };
119.
120.
121.
122.
123.
124.
125.
126.
127.
128.
129.
130.
131.
132. this.close = function() {
133.
134. self.messageDiv.style.display = 'none';
135. self.cleanUp();
136.
137. };
138.
139.
140.
141.
142.
143.
144.
145.
146.
147.
148.
149.
150.
151. this.cleanUp = function() {
152.
153. self.messageDiv = null;
154. self.titleDiv = null;
155. self.titleSpanText = null;
156. self.titleSpanButton = null;
157. self.textDiv = null;
158. self.buttonDiv = null;
159. self.button = null;
160. self.closeButton = null;
161.
162. };
163.
164.
165.
166.
167.
168.
169.
170.
171.
172.
173.
174.
175.
176. this.move = function(e) {
177.
178. if (!e) var e = window.event;
179.
180. if (e.pageX) {
181. self.x = e.pageX;
182. self.y = e.pageY;
183. }
184. else if (e.clientX) {
185. self.x = e.clientX;
186. self.y = e.clientY;
187. }
188.
189. self.messageDiv.style.left = (self.x - self.xOffSet) + 'px';
190. self.messageDiv.style.top = (self.y - self.yOffSet) + 'px';
191.
192. };
193.
194.
195.
196.
197.
198.
199.
200.
201.
202.
203.
204.
205.
206. this.drag = function(e) {
207.
208. if (!e) var e = window.event;
209.
210. if (e.pageX) {
211. self.x = e.pageX;
212. self.y = e.pageY;
213. }
214. else if (e.clientX) {
215. self.x = e.clientX;
216. self.y = e.clientY;
217. }
218.
219. document.onmousemove = self.move;
220.
221. self.xOffSet = self.x - self.messageDiv.offsetLeft;
222. self.yOffSet = self.y - self.messageDiv.offsetTop;
223.
224. };
225.
226.
227.
228.
229.
230.
231.
232.
233.
234.
235.
236.
237.
238. this.drop = function() {
239.
240. document.onmousemove = function() { };
241.
242. };
243.
244.
245.
246.
247.
248.
249.
250.
251.
252.
253.
254.
255.
256. this.getCenterX = function() {
257.
258. var scrolledX = 0;
259. var widthX = 0;
260.
261. if (window.pageXOffset) {
262. scrolledX = window.pageXOffset;
263. }
264. else if (document.documentElement && document.documentElement.scrollLeft) {
265. scrolledX = document.documentElement.scrollLeft;
266. }
267. else if (document.body && document.body.scrollLeft) {
268. scrolledX = document.body.scrollLeft;
269. }
270.
271. if (window.innerWidth) {
272. widthX = window.innerWidth;
273. }
274. else if (document.documentElement && document.documentElement.clientWidth) {
275. widthX = document.documentElement.clientWidth;
276. }
277. else if (document.body && document.body.clientWidth) {
278. widthX = document.body.clientWidth;
279. }
280.
281. return scrolledX + (widthX - self.width) / 2;
282.
283. };
284.
285.
286.
287.
288.
289.
290.
291.
292.
293.
294.
295.
296.
297. this.getCenterY = function() {
298.
299. var scrolledY = 0;
300. var heightY = 0;
301.
302. if (window.pageYOffset) {
303. scrolledY = window.pageYOffset;
304. }
305. else if (document.documentElement && document.documentElement.scrollTop) {
306. scrolledY = document.documentElement.scrollTop;
307. }
308. else if (document.body && document.body.scrollTop) {
309. scrolledY = document.body.scrollTop;
310. }
311.
312. if (window.innerHeight) {
313. heightY = window.innerHeight;
314. }
315. else if (document.documentElement && document.documentElement.clientHeight) {
316. heightY = document.documentElement.clientHeight;
317. }
318. else if (document.body && document.body.clientHeight) {
319. heightY = document.body.clientHeight;
320. }
321.
322. return scrolledY + (heightY - self.height) / 2;
323.
324. };
325.
326.
327.
328.
329.
330.
331.
332.
333.
334.
335.
336.
337.
338. this.setMessageDivStyle = function(cssClass) {
339.
340. if (!cssClass) {
341.
342. self.messageDiv.style.fontFamily = 'Calibri';
343. self.messageDiv.style.backgroundColor = '#EEEEEE';
344. self.messageDiv.style.border = '2px solid black';
345. self.messageDiv.style.cursor = 'default';
346. }
347. else {
348. self.messageDiv.className = cssClass;
349. }
350.
351.
352. self.messageDiv.style.display = 'none';
353. self.messageDiv.style.position = 'absolute';
354. self.messageDiv.style.width = self.width + 'px';
355.
356. };
357.
358.
359.
360.
361.
362.
363.
364.
365.
366.
367.
368.
369.
370. this.setTitleDivStyle = function(cssClass) {
371.
372. if (!cssClass) {
373.
374. self.titleDiv.style.backgroundColor = '#0066CC';
375. self.titleDiv.style.color = 'white';
376. }
377. else {
378. self.titleDiv.className = cssClass;
379. }
380.
381.
382. self.titleDiv.style.fontSize = '16px';
383. self.titleDiv.style.padding = '2px';
384. self.titleDiv.style.fontWeight = 'bold';
385. self.titleDiv.style.borderBottom = '2px solid black';
386. self.titleDiv.style.height = '22px';
387.
388. };
389.
390.
391.
392.
393.
394.
395.
396.
397.
398.
399.
400.
401.
402. this.setTextDivStyle = function(cssClass) {
403.
404. if (!cssClass) {
405.
406. self.textDiv.style.fontSize = '14px';
407. }
408. else {
409. self.textDiv.className = cssClass;
410. }
411.
412.
413. self.textDiv.style.padding = '4px';
414. self.textDiv.style.marginBottom = '16px';
415.
416. };
417.
418.
419.
420.
421.
422.
423.
424.
425.
426.
427.
428.
429.
430. this.setButtonDivStyle = function() {
431.
432. self.buttonDiv.style.textAlign = 'center';
433. self.buttonDiv.style.marginBottom = '8px';
434.
435. };
436.
437.
438.
439.
440.
441.
442.
443.
444.
445.
446.
447.
448.
449. this.setCloseButtonStyle = function() {
450.
451. self.closeButton.style.fontWeight = 'bold';
452. self.closeButton.style.backgroundColor = 'red';
453. self.closeButton.style.color = 'white';
454. self.closeButton.style.border = '2px solid #009999';
455. self.closeButton.style.cursor = 'pointer';
456.
457. };
458.
459.
460.
461.
462.
463.
464.
465.
466.
467.
468.
469.
470.
471. this.setButtonStyle = function(cssClass) {
472.
473. if (!cssClass) {
474.
475. self.button.style.border = '2px solid #009999';
476. self.button.style.cursor = 'pointer';
477. }
478. else {
479. self.button.className = cssClass;
480. }
481.
482. };
483.
484.
485.
486.
487.
488.
489.
490.
491.
492.
493.
494.
495.
496.
497. this.setFloatStyle = function(obj, style) {
498.
499. obj.style.cssFloat = style;
500. obj.style.styleFloat = style;
501.
502. };
503.
504.}
505.</script>
506.<body>
507.<input type="button" name="aa" id="aa" value="5555555" onclick="javascript:var MsgBox = new MessageBox(); MsgBox.show(300, 150, 'Example Title', 'Example Text', 'Button Text');" />
508.</body>
509.</html>
