1
<style id="popupmanager">...
2
.popup{...}{
3
font-size:9pt;
4 width: 329px;
5 height: 74px;
6 border: 1px solid #0A246A;
7 filter: Alpha(opacity=80);
8
}
9.popup td{...}{
10 font-size:9pt;
11}
12.popupCaption{...}{
13 background-image: url(images/popup_bg_caption.gif);
14 height: 7px;
15}
16.popupCaptionText{...}{
17 overflow:hidden;
18 width: 260;
19 height: 100%;
20 padding-right: 4px;
21 padding-top: 4px;
22 text-decoration: underline;
23 color: blue;
24}
25
26.popupBody{...}{
27 background-image: url(images/popup_bg_body.gif);
28}
29.popupBodyText{...}{
30 overflow:hidden;
31 width: 100%;
32 height: 100%;
33 word-break: break-all;
34 word-wrap :break-word;
35 line-height: 1.1em;
36 padding-top: 1px;
37 text-decoration: underline;
38 color: blue;
39}
40
41.popupButton{...}{
42
43}
44.popupButtonHover{...}{
45 background-color: #0A246A;
46}
47.popupButtonHover TD{...}{
48 background-color: #B6BDD2;
49}
50
51.popupMenu{...}{
52 width: 177px;
53 border: 1px solid #666666;
54 background-color: #F9F8F7;
55 padding: 1px;
56}
57.popupMenuTable{...}{
58 background-image: url(images/popup_bg_menu.gif);
59 background-repeat: repeat-y;
60}
61.popupMenuTable TD{...}{
62 font-size: 9pt;
63 cursor: default;
64}
65.popupMenuRow{...}{
66 height: 22px;
67 padding: 1px;
68}
69.popupMenuRowHover{...}{
70 height: 22px;
71 border: 1px solid #0A246A;
72 background-color: #B6BDD2;
73}
74.popupMenuSep{...}{
75 background-color: #A6A6A6;
76 height:1px;
77 width: expression(parentElement.offsetWidth-27);
78 position: relative;
79 left: 28;
80
}
81
</style>
82<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
83<script language="JavaScript" type="text/javascript">...
84
85// 队列
86function Queue()
87...{
88 var items = new Array();
89
90 var first = 0;
91 var count = 0;
92
93 // 队列大小
94 //
95 this.Count = function()
96 ...{
97 return count;
98 } ;
99
100 // 取队列头/尾
101 //
102 this.Peek = function(last)
103 ...{
104 var result = null;
105
106 if (count > 0)
107 ...{
108 if (null != last && true == last)
109 result = items[first + (count - 1)];
110 else
111 result = items[first];
112 }
113
114 return result;
115 };
116
117 // 入列
118 //
119 this.Enqueue = function(x)
120 ...{
121 items[first + count] = x;
122
123 count++;
124 return x;
125 };
126
127 // 出列
128 //
129 this.Dequeue = function()
130 ...{
131 var result = null;
132
133 if (count > 0)
134 ...{
135 result = items[first];
136
137 delete items[first];
138 first++;
139 count--;
140 }
141
142 return result;
143 };
144}
145
146
147var newlineRegExp = new RegExp("(\r\n|\n|\r)", "g");
148
149function NewlineReplace(str)
150...{
151 result = "";
152
153 if (str != null)
154 result = str.replace(newlineRegExp, "<br>");
155
156 return result;
157}
158
159var entityList = new Array();
160entityList["<"] = "<";
161entityList["\uff1c"] = "<";
162entityList[">"] = ">";
163entityList["\uff1e"] = ">";
164entityList["&"] = "&";
165entityList["\uff06"] = "&";
166entityList["\""] = """;
167entityList["\uff02"] = """;
168
169function EntityReplace(str)
170...{
171 var result = "";
172
173 if (str != null)
174 ...{
175 var len = str.length;
176
177 var i = 0;
178
179 while (i < len)
180 ...{
181 var j = i;
182
183 var e = entityList[str.charAt(j)];
184
185 while (j < len && null == e)
186 ...{
187 j++;
188
189 e = entityList[str.charAt(j)];
190 }
191
192 result += str.substr(i, j - i);
193
194 if (e != null)
195 ...{
196 result += e;
197
198 j++;
199 }
200
201 i = j;
202 }
203 }
204
205 return result;
206}
207
208function GetPopupCssText()
209...{
210 var styles = document.styleSheets;
211 var csstext = "";
212 for(var i=0; i<styles.length; i++)
213 ...{
214 if (styles[i].id == "popupmanager")
215 csstext += styles[i].cssText;
216 }
217 return csstext;
218}
219
220function PopupWin(winID)
221...{
222 this.Win = document.getElementById(winID);
223 this.Menu = document.getElementById(winID + "_Menu");
224 this.Icon = document.getElementById(winID + "_Icon");
225 this.MenuButton = document.getElementById(winID + "_MenuButton");
226 this.CloseButton = document.getElementById(winID + "_CloseButton");
227 this.Caption = document.getElementById(winID + "_Caption");
228 this.CaptionText = document.getElementById(winID + "_CaptionText");
229 this.Body = document.getElementById(winID + "_Body");
230 this.BodyText = document.getElementById(winID + "_BodyText");
231}
232
233function Popup(winID, message, icon, title, func)
234...{
235 this.PostID;
236 this.URL;
237 this.Type = "Mail"; // Mail,Thread,Post,Message
238 this.win = new PopupWin(winID);
239 this.popup = null;
240 this.popupMenu = null;
241 this.PopupManager = null;
242 this.showTime = null;
243 this.func = func;
244 this.isMouseOver = false;
245 this.CreateBody = Popup_CreateBody;
246 this.Close = Popup_Close;
247 this.Hide = Popup_Hide;
248 this.Show = Popup_Show;
249 this.ShowTime = Popup_ShowTime;
250 this.aspxl = this.CreateBody(message, icon, title);
251}
252
253function Popup_Close()
254...{
255 if (this.popup != null)
256 this.popup.document.onmouseover = null;
257 else
258 this.win.Win.onmouseover = null;
259
260 this.isMouseOver = false;
261 this.ShowTime = function()
262 ...{
263 return 7;
264 }
265
266 this.Hide();
267}
268
269function Popup_Hide()
270...{
271 if (this.popup != null && this.popup.isOpen)
272 ...{
273 this.popup.hide();
274 }
275
276 this.popup = null;
277}
278
279function Popup_ShowTime()
280...{
281 var result = null;
282
283 if (this.showTime != null)
284 ...{
285 var now = new Date();
286
287 result = (now - this.showTime)/1000;
288 }
289
290 return result;
291}
292
293//
294function OnClickClose_Popup()
295...{
296 var p = this.getAttribute("popup");
297 p.Close();
298}
299
300function OnClickMenu_Popup()
301...{
302 var p = this.getAttribute("popup");
303 if (p.popupMenu == null)
304 ...{
305 p.popupMenu = p.popup.document.parentWindow.createPopup();
306 var d = p.popupMenu.document;
307 var s = d.createStyleSheet();
308 s.cssText = GetPopupCssText();
309 var b = d.body;
310 b.rightmargin = 0;
311 b.leftmargin = 0;
312 b.topmargin = 0;
313 b.bottommargin = 0;
314 b.innerHTML = p.win.Menu.outerHTML;
315 b.style.cursor = "default";
316 b.oncontextmenu = OnContextMenu_Popup;
317 b.onmouseover = OnMouseOver_PopupMenu;
318 b.onmouseout = OnMouseOut_PopupMenu;
319 b.setAttribute("popup", p);
320 var menuDisable = d.getElementById(p.win.Win.id + "_Menu_Disable");
321 menuDisable.onclick = OnClickDisable_PopupMenu;
322 menuDisable.setAttribute("popup", p);
323 var menuSetting = d.getElementById(p.win.Win.id + "_Menu_Setting");
324 menuSetting.onclick = OnClickSetting_PopupMenu;
325 menuSetting.setAttribute("popup", p);
326 }
327 var toastWidth = p.win.Menu.offsetWidth;
328 var toastHeight = p.win.Menu.offsetHeight;
329 var toastVerticalMargin = 20;
330 var toastHorizontalMargin = 0;
331 p.popupMenu.show(toastHorizontalMargin, -toastVerticalMargin-toastHeight,
332 toastWidth, toastHeight, p.win.MenuButton);
333}
334
335function OnClick_Popup()
336...{
337 var p = this.getAttribute("popup");
338
339 if (p != null && p.func != null)
340 ...{
341 p.func(p);
342 }
343}
344
345function OnClickDisable_PopupMenu()
346...{
347 var p = this.getAttribute("popup");
348
349 if (p != null)
350 ...{
351 p.PopupManager.Disabled = true;
352 p.Close();
353 }
354}
355
356function OnClickSetting_PopupMenu()
357...{
358 var url = this.getAttribute("URL");
359 var p = this.getAttribute("popup");
360
361 if (url != null)
362 ...{
363 window.open(url);
364 if (p != null)
365 ...{
366 p.Close();
367 }
368 }
369}
370
371function OnContextMenu_Popup()
372...{
373 var p = this.getAttribute("popup");
374 p.Close();
375}
376
377function OnMouseOver_Popup()
378...{
379 var p = this.getAttribute("popup");
380 p.isMouseOver = true;
381}
382
383function OnMouseOut_Popup()
384...{
385 var p = this.getAttribute("popup");
386 p.isMouseOver = false;
387}
388
389function OnMouseOver_PopupMenu()
390...{
391 var p = this.getAttribute("popup");
392 p.isMouseOver = true;
393}
394
395function OnMouseOut_PopupMenu()
396...{
397 var p = this.getAttribute("popup");
398 p.isMouseOver = false;
399}
400
401function Popup_Show()
402...{
403 this.showTime = new Date();
404 this.popup = window.createPopup();
405 var d = this.popup.document;
406
407 // d.createStyleSheet("CSS/style.css");
408 var s=d.createStyleSheet();
409 s.cssText = GetPopupCssText();
410 var b = d.body;
411 b.rightmargin = 0;
412 b.leftmargin = 0;
413 b.topmargin = 0;
414 b.bottommargin = 0;
415 b.innerHTML = this.aspxl;
416 b.style.cursor = "default";
417 b.oncontextmenu = OnContextMenu_Popup;
418 b.onmouseover = OnMouseOver_Popup;
419 b.onmouseout = OnMouseOut_Popup;
420 b.setAttribute("popup", this);
421 var closeButton = d.getElementById(this.win.Win.id + "_CloseButton");
422 closeButton.onclick = OnClickClose_Popup;
423 closeButton.setAttribute("popup", this);
424
425 var menuButton = d.getElementById(this.win.Win.id + "_MenuButton");
426 menuButton.onclick = OnClickMenu_Popup;
427 menuButton.setAttribute("popup", this);
428
429 var popupMessage = d.getElementById(this.win.Win.id + "_BodyText");
430 popupMessage.style.cursor = "hand";
431 popupMessage.onclick = OnClick_Popup;
432 popupMessage.setAttribute("popup", this);
433 var toastWidth = this.win.Win.offsetWidth;
434 var toastHeight = this.win.Win.offsetHeight;
435 var toastVerticalMargin = 28;
436 var toastHorizontalMargin = 16;
437 var screenWidth = window.screen.width;
438 var screenHeight = window.screen.height;
439 this.popup.show(screenWidth - toastWidth - toastHorizontalMargin,
440 screenHeight - toastHeight - toastVerticalMargin,
441 toastWidth, toastHeight);
442
443}
444
445function Popup_CreateBody(msg, icon, title)
446...{
447 if (icon != null && icon != "")
448 this.win.Icon.src = icon;
449 this.win.BodyText.innerHTML = NewlineReplace(EntityReplace(msg));;
450 this.win.CaptionText.innerHTML = title;
451 var win = this.win.Win.cloneNode(true);
452 win.style.display = "";
453 return win.outerHTML;
454}
455
456
457function PopupManager()
458...{
459 var queue = new Queue();
460 this.Disabled = false;
461
462 var canShow = (window.createPopup != null);
463 this.Heartbeat = function()
464 ...{
465 if (queue.Count() > 0)
466 ...{
467 var p = queue.Peek();
468
469 var delta = p.ShowTime();
470
471 if (delta == null)
472 ...{
473 if (!this.Disabled)
474 p.Show();
475 }
476 else if ((p.popup == null) || (!p.popup.isOpen) || (!p.isMouseOver && delta >= 7))
477 ...{
478 p.Hide();
479
480 queue.Dequeue();
481 }
482 }
483 }
484
485 this.AddPopup = function(winid, message, icon, title, func)
486 ...{
487 var result = null;
488 do
489 ...{
490 if (canShow)
491 ...{
492 result = new Popup(winid, message, icon, title, func);
493 result.PopupManager = this;
494
495 queue.Enqueue(result);
496 this.Heartbeat();
497 }
498 }
499 while (false);
500
501 return result;
502 }
503}
504
505
506</script>
507<table id="popupWin" class="popup" cellspacing="0" cellpadding="0" border="0"
508 onselectstart="return false;" ondragstart="return false;" style="display:;">
509 <tr class="popupCaption" id="popupWin_Caption">
510 <td align="center"><img src="images/popup_caption.gif" border="0" alt="" /></td>
511 </tr>
512 <tr class="popupBody" id="popupWin_Body">
513 <td valign="top">
514 <table cellspacing="0" cellpadding="0" border="0" width="100%" height="100%">
515 <tr>
516 <td align="center" valign="top" width="46"
517 style="padding-top: 2px;width:46px;" nowrap>
518 <img src="images/popup_icon_mail.gif" border="0"
519 alt="" id="popupWin_Icon"/>
520 </td>
521 <td>
522 <table cellspacing="0" cellpadding="0" border="0"
523 width="100%" height="100%">
524 <tr height="18">
525 <td valign="bottom"><div id="popupWin_CaptionText"
526 class="popupCaptionText">title1</div></td>
527 <td align="right" width="18">
528 <table cellspacing="1" cellpadding="0"
529 border="0" width="18" height="18"
530 class="popupButton"
531 onmouseover="this.className='popupButtonHover';"
532 onmouseout="this.className='popupButton';"
533 onmousedown="var img=this.rows[0].cells[0].children[0];img.src=img.src.replace('_black','_white');"
534 onmouseup="var img=this.rows[0].cells[0].children[0];img.src=img.src.replace('_white','_black');"
535 id="popupWin_MenuButton">
536 <tr>
537 <td align="center">
538 <img src="images/popup_icon_arrow_black.gif"
539 border="0" alt="" /></td>
540 </tr>
541 </table>
542 </td>
543 <td align="right" width="18">
544 <table cellspacing="1" cellpadding="0" border="0" width="18"
545 height="18" class="popupButton"
546 onmouseover="this.className='popupButtonHover';"
547 onmouseout="this.className='popupButton';"
548 id="popupWin_CloseButton">
549 <tr>
550 <td align="center">
551 <img src="images/popup_icon_close.gif"
552 border="0" alt="" /></td>
553 </tr>
554 </table>
555 </td>
556 </tr>
557 <tr>
558 <td colspan="2" valign="top">
559 <div id="popupWin_BodyText" class="popupBodyText">
560
561 </div>
562 </td>
563 </tr>
564 <tr height="8">
565 <td/>
566 <td/>
567 </tr>
568 </table>
569 </td>
570 </tr>
571 </table>
572 </td>
573 </tr>
574</table>
575
576<div class="popupMenu" id="popupWin_Menu">
577 <table cellspacing="0" cellpadding="0" border="0" width="100%"
578 height="100%" class="popupMenuTable">
579 <tr height="22">
580 <td class="popupMenuRow" onmouseover="this.className='popupMenuRowHover';"
581 onmouseout="this.className='popupMenuRow';" id="popupWin_Menu_Disable">
582 <table cellspacing="0" cellpadding="0" border="0" width="100%" height="100%">
583 <tr>
584 <td width="28"> </td>
585 <td><span>Disable Popup</span></td>
586 </tr>
587 </table>
588 </td>
589 </tr>
590 <tr height="3">
591 <td>
592 <div class="popupMenuSep"><img height="1px"></div>
593 </td>
594 </tr>
595 <tr height="22">
596 <td class="popupMenuRow" onmouseover="this.className='popupMenuRowHover';"
597 onmouseout="this.className='popupMenuRow';"
598 id="popupWin_Menu_Setting" URL="/User/EditProfile.aspx?ReturnUrl=/driver.aspx">
599 <table cellspacing="0" cellpadding="0" border="0" width="100%" height="100%">
600 <tr>
601 <td width="28"> </td>
602 <td><span>Popup Setting</span></td>
603 </tr>
604 </table>
605 </td>
606 </tr>
607 </table>
608</div>
609
610<script>...
611var popupManager = new PopupManager();
612window.setInterval("popupManager.Heartbeat();", 1500); // 更新
613var p = popupManager.AddPopup("popupWin", "My PM Content", "", "My PM Subject", func);
614p.PostID = 1;
615p = popupManager.AddPopup("popupWin", "New Post Content1",
616 "images/popup_icon_Post.gif", "New Post Subject1", func);
617p.PostID = 2;
618p = popupManager.AddPopup("popupWin", "New Post Content2",
619 "images/popup_icon_Post.gif", "New Post Subject2", func);
620p.PostID = 3;
621
622function func(popup)
623...{
624 alert("PostID:" + popup.PostID)
625}
626</script>
627