Web的（Popup）桌面提醒

Web的（Popup）桌面提醒，不错的一个代码，值得收藏（详细代已包括在附件里）

全部代码如下：

  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["<"] = "&lt;";

161entityList["\uff1c"] = "&lt;";

162entityList[">"] = "&gt;";

163entityList["\uff1e"] = "&gt;";

164entityList["&"] = "&amp;";

165entityList["\uff06"] = "&amp;";

166entityList["\""] = "&quot;";

167entityList["\uff02"] = "&quot;";

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">&nbsp;</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">&nbsp;</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

附件:/Files/xiongeee/popup.rar