[转载文章] 改善用户体验的alert提示效果

今天在经典看到有人把这效果独立出来了( Z$ P$ [' x- K3 l& d  l4 ?
( S0 [7 M, K4 |* |6 M1 F
http://bbs.blueidea.com/thread-2688074-1-1.html ! o. O# T# H+ r$ G

/ q' O8 t1 b+ h如同Lightbox的效果那边，或者说和Windows关闭系统前的那一刻类似，为突出显示主题而采取的暗淡背景的方法在Web2.0的站点风格中被越来越多的使用。
' j+ y) {5 Z9 r: `9 {) u: N  a. [" v8 l# H
(关于Lightbox：http://www.cnbruce.com/blog/showlog.asp?cat_id=34&log_id=1005 )
: q' W$ R1 L# c1 v6 k  }. P( I3 \2 j/ w+ v
现在，当弹出千篇一律的Alert警告框被这样的一种方式取代时，给人的感觉是相当的新鲜的。
8 O% D7 W" U/ @8 N" c3 h" i2 S
* S& x8 i; ?0 h' @4 c这样
8 k2 n4 e" m9 z! o- G% F+ E; `) s; g) c3 n$ s( y$ a5 T
<input type="button" value="点击这里" onclick="sAlert('测试效果<br>还可以直接书写HTML代码 <br>© 2006');" />
1 Y! z! Q9 Y9 W# j& p
9 G1 u8 [9 s. V<script type="text/javascript" language="javascript">
) s& E4 V! s2 b' N8 j# F" q//Author:Daviv4 ?% n$ M. N$ a
//Blog:http://blog.163.com/jxdawei; X3 Y$ g1 s8 N# n
//Date:2006-10-28
  Y( g8 z  L+ G6 X3 x/ r+ o1 n//Email:jxdawei@gmail.com6 T3 x; V* k* _/ |; D+ z  f) d
            function sAlert(str){/ L$ k, s$ f$ M. b
            var msgw,msgh,bordercolor;
8 s0 r7 u% X0 }' m- Z' ?8 {            msgw=400;//提示窗口的宽度
3 N) |# `( e6 P# C: m  k9 }9 x            msgh=100;//提示窗口的高度+ _( G+ n- ^/ [
            bordercolor="#336699";//提示窗口的边框颜色
3 s9 y+ j$ c9 w+ c            titlecolor="#99CCFF";//提示窗口的标题颜色( r* m* w! Q7 l- Z5 ^8 N
            % P: l* p8 W. s; ^; S2 a$ U
            var sWidth,sHeight;
6 r9 l: W5 y* W: ]  L# O. m4 x/ |            sWidth=document.body.offsetWidth;6 u7 \) h% X( W# a. U! p
            sHeight=document.body.offsetHeight;
7 k# ?, e# Y; b! V# ^; d            
+ u: v9 k9 F+ s) ?. [0 p& X
( L; P4 @! W% F            var bgObj=document.createElement("div");
) R) Y& C2 B3 {+ l: W            bgObj.setAttribute('id','bgDiv');
& C3 ?$ E& C& v' y/ d  _            bgObj.style.position="absolute";2 B$ m6 W& |5 r9 V( y- Z
            bgObj.style.top="0";4 R6 }0 r" ^: ?
            bgObj.style.background="#777";
* \6 F) F; @# c& M( z: K9 y2 W9 ~            bgObj.style.filter="progidXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75";, T5 |) e# Y7 t5 V7 E
            bgObj.style.opacity="0.6";# p3 L9 H. }- G# `( F; {
            bgObj.style.left="0";
% ~1 `/ d9 w5 ?4 C0 s+ m            bgObj.style.width=sWidth + "px";
) h/ C- N5 k+ _            bgObj.style.height=sHeight + "px";
# n6 f( b7 t" @5 Y9 H            document.body.appendChild(bgObj);
  G- a! g; z6 r: h) r! ]            var msgObj=document.createElement("div")
% @' m) j3 o6 N            msgObj.setAttribute("id","msgDiv");  p! v6 V1 p  n5 N% h( P" F/ f
            msgObj.setAttribute("align","center");
+ L/ J; L# j; r6 k* {( w) t            msgObj.style.position="absolute";5 D+ Y4 A' Y" ^# Z0 u! S! [
            msgObj.style.background="white";
8 g7 f' r4 T. l4 }" k. ?' L7 D            msgObj.style.font="12px/1.6em Verdana, Geneva, Arial, Helvetica, sans-serif";# [* y% ~: o5 F- s; V( [( i' v
            msgObj.style.border="1px solid " + bordercolor;* ?. m. C6 y3 \2 t; i6 u: `
            msgObj.style.width=msgw + "px";7 E8 R8 D- Z  |' e
            msgObj.style.height=msgh + "px";
  y' ?2 u( I: y. b: c, e          msgObj.style.top=(document.documentElement.scrollTop + (sHeight-msgh)/2) + "px";5 A- S  e) l0 p- _
          msgObj.style.left=(sWidth-msgw)/2 + "px";
* _% y, @1 H% @3 m' P$ @( @& W          var title=document.createElement("h4");: l9 d% ^5 K, b6 r; N" a
          title.setAttribute("id","msgTitle");
% i7 }& e+ ?' D6 f" X          title.setAttribute("align","right");
$ j$ k; @; ^3 ^" Y5 r. S2 Z1 a          title.style.margin="0";1 m% Z% d/ ~4 K9 L7 y; |1 r
          title.style.padding="3px";
' m* q5 F8 @2 u7 f' Q1 X- }          title.style.background=bordercolor;
% I; H/ P6 c2 {) l          title.style.filter="progid:DXImageTransform.Microsoft.Alpha(startX=20, startY=20, finishX=100, finishY=100,style=1,opacity=75,finishOpacity=100);";
" q6 b+ @( o1 v7 H3 _' U          title.style.opacity="0.75";
5 |) Z* u5 Q6 v          title.style.border="1px solid " + bordercolor;
+ p& i) a2 O! K6 k# R% N          title.style.height="18px";
" N/ F5 X) F. o3 ^$ y          title.style.font="12px Verdana, Geneva, Arial, Helvetica, sans-serif";
; m/ k! e: O. O! m+ G. v, k; S          title.style.color="white";
5 k7 S# g  L% o9 ]          title.style.cursor="pointer";
8 i. o9 ~, k; _, j          title.innerHTML="关闭";
1 `/ _0 e6 l7 Y0 Q$ q          title.onclick=function(){3 b: T  M4 D3 `, O
            document.body.removeChild(bgObj);7 g" {) x) O" @( `3 w$ R
        document.getElementById("msgDiv").removeChild(title);: K) H* _3 j2 M* v3 O0 l
        document.body.removeChild(msgObj);
: ~/ X0 F3 v( o2 q        }, X' ~% q/ Z9 D3 U( K2 p
          document.body.appendChild(msgObj);/ N5 t. k1 b2 b8 `
          document.getElementById("msgDiv").appendChild(title);' m- D2 D; t: {& i
          var txt=document.createElement("p");
, C6 k8 l( S4 A# a; U- M          txt.style.margin="1em 0") U* ^$ ]. E: s+ j$ i
          txt.setAttribute("id","msgTxt");1 E  s* Z8 M" C
          txt.innerHTML=str;! N; B$ h1 I4 I( v' @2 |/ O& X& I
      doc
7 T/ a) @& W3 V* n) j8 U; {$ T" T( n- I
把SCRIPT做成一个JS文件就可以了。