可以移动的自定义Alert « 大尾巴狼的自留地

可以移动的自定义Alert

今天和朋友群聊才知道原来Alert是可以重写的

摘抄源码如下
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="gb2312" > <head> <meta http-equiv="content-type" content="text/html; charset=gb2312" /> <meta name="author" content="Smiling Dolphin" /> <meta name="keywords" content="design, css, cascading, style, sheets, xhtml, graphic design, w3c, web standards, visual, display, java, javascript, c++, php, jsp, asp, py, pl" /> <meta name="description" content="my favorites language." /> <meta name="robots" content="all" /> <style type="text/css" title="currentStyle" media="screen"> body,p{ margin:0px; padding:0px; } </style> </head> <body> <input type="button" value="显示Alert" onclick="alert('我改写了Alert显示的样式')" /> <script language="javascript" type="text/javascript"> window.alert = function(txt) { var shield = document.createElement("DIV"); shield.id = "shield"; shield.style.position = "absolute"; shield.style.left = "0px"; shield.style.top = "0px"; shield.style.width = "100%"; shield.style.height = document.body.scrollHeight+"px"; shield.style.background = "#333"; shield.style.textAlign = "center"; shield.style.zIndex = "10000"; shield.style.filter = "alpha(opacity=0)"; var alertFram = document.createElement("DIV"); alertFram.id="alertFram"; alertFram.style.position = "absolute"; alertFram.style.left = "50%"; alertFram.style.top = "50%"; alertFram.style.marginLeft = "-225px"; alertFram.style.marginTop = "-75px"; alertFram.style.width = "450px"; alertFram.style.height = "150px"; alertFram.style.background = "#ccc"; alertFram.style.textAlign = "center"; alertFram.style.lineHeight = "150px"; alertFram.style.zIndex = "10001"; strHtml = " <ul style=\"list-style:none;margin:0px;padding:0px;width:100%\">\n"; strHtml += " <li style=\"background:#DD828D;text-align:left;padding-left:20px;font-size:14px;font-weight:bold;height:25px;line-height:25px;border:1px solid #F9CADE;\">[系统提示]</li> \n"; strHtml += " <li style=\"background:#fff;text-align:center;font-size:12px;height:120px;line-height:120px;border-left:1px solid #F9CADE;border-right:1px solid #F9CADE;\">"+txt+"</li> \n"; strHtml += " <li style=\"background:#FDEEF4;text-align:center;font-weight:bold;height:25px;line-height:25px; border:1px solid #F9CADE;\"> <input type=\"button\" value=\"确定\" onclick=\"doOk()\" /></li> \n"; strHtml += "</ul> \n"; alertFram.innerHTML = strHtml; document.body.appendChild(alertFram); document.body.appendChild(shield); var c = 0; this.doAlpha = function(){ if (c++ > 20){clearInterval(ad);return 0;} shield.style.filter = "alpha(opacity="+c+");"; } var ad = setInterval("doAlpha()",5); this.doOk = function(){ alertFram.style.display = "none"; shield.style.display = "none"; } alertFram.focus(); document.body.onselectstart = function(){return false;}; } </script> </body> </html>

课外阅读
页面右下角弹出类似QQ或MSN的消息提示
 可以移动的自定义Alert

原文地址：http://yhz61010.blog.sohu.com/76544867.html

标签： Alert, JavaScript

这篇文章发布于 2010年03月11日，星期四，00:01，归类于 JavaScript, 前端开发。您可以跟踪这篇文章的评论通过 RSS 2.0 feed。您可以留下评论，或者从您的站点trackback。

3 条评论发表在“可以移动的自定义Alert”上

优艾点说：

2010年03月11日于12:29

很深奥 = =|||

可以移动的自定义Alert

3 条评论 发表在“可以移动的自定义Alert”上

留下回复

3 条评论发表在“可以移动的自定义Alert”上