用javascript实现改善用户体验之alert提示效果

类似于新浪邮箱的提示效果。比较独立。在wenming版主的帮助下，已解决了高度不能适应的bug。 使用方法很简单，在需要弹出提示的页面先引用alert.js脚本文件,如: 
 程序代码
<script type="text/javascript" src="alert.js"></script>
然后直接在需要提出处使用： 
 程序代码
salert("需要提示的信息");
即可.不需要额外添加html代码.
完整代码:
</p> <p> <title><br /> </title> </p> <p> *{<br /> margin:0;padding:0;<br /> } </p> <p>测试</p> <p>测试</p> <p>测试</p> <p>测试</p> <p>测试</p> <p>测试</p> <p>测试</p> <p>测试</p> <p>测试</p> <p>测试</p> <p>测试</p> <p>测试</p> <p>测试</p> <p>测试</p> <p>测试</p> <p>//author:daviv<br /> //blog:http://blog.163.com/<br /> //date:2006-10-27<br /> //email:@gmail.com </p> <p> function salert(str){<br /> var msgw,msgh,bordercolor;<br /> msgw=400;//提示窗口的宽度<br /> msgh=100;//提示窗口的高度<br /> titleheight=25 //提示窗口标题高度<br /> bordercolor="#336699";//提示窗口的边框颜色<br /> titlecolor="#99ccff";//提示窗口的标题颜色 </p> <p> var swidth,sheight;<br /> swidth=document.body.offsetwidth;<br /> sheight=screen.height; </p> <p> var bgobj=document.createelement("div");<br /> bgobj.setattribute('id','bgdiv');<br /> bgobj.style.position="absolute";<br /> bgobj.style.top="0";<br /> bgobj.style.background="#777";<br /> bgobj.style.filter="progid:dximagetransform.microsoft.alpha(style=3,opacity=25,finishopacity=75";<br /> bgobj.style.opacity="0.6";<br /> bgobj.style.left="0";<br /> bgobj.style.width=swidth + "px";<br /> bgobj.style.height=sheight + "px";<br /> bgobj.style.zindex = "10000";<br /> document.body.appendchild(bgobj); </p> <p> var msgobj=document.createelement("div")<br /> msgobj.setattribute("id","msgdiv");<br /> msgobj.setattribute("align","center");<br /> msgobj.style.background="white";<br /> msgobj.style.border="1px solid " + bordercolor;<br /> msgobj.style.position = "absolute";<br /> msgobj.style.left = "50%";<br /> msgobj.style.top = "50%";<br /> msgobj.style.font="12px/1.6em verdana, geneva, arial, helvetica, sans-serif";<br /> msgobj.style.marginleft = "-225px" ;<br /> msgobj.style.margintop = -75+document.documentelement.scrolltop+"px";<br /> msgobj.style.width = msgw + "px";<br /> msgobj.style.height =msgh + "px";<br /> msgobj.style.textalign = "center";<br /> msgobj.style.lineheight ="25px";<br /> msgobj.style.zindex = "10001"; </p> <p> var title=document.createelement("h4");<br /> title.setattribute("id","msgtitle");<br /> title.setattribute("align","right");<br /> title.style.margin="0";<br /> title.style.padding="3px";<br /> title.style.background=bordercolor;<br /> title.style.filter="progid:dximagetransform.microsoft.alpha(startx=20, starty=20, finishx=100, finishy=100,style=1,opacity=75,finishopacity=100);";<br /> title.style.opacity="0.75";<br /> title.style.border="1px solid " + bordercolor;<br /> title.style.height="18px";<br /> title.style.font="12px verdana, geneva, arial, helvetica, sans-serif";<br /> title.style.color="white";<br /> title.style.cursor="pointer";<br /> title.innerhtml="关闭";<br /> title.onclick=function(){<br /> document.body.removechild(bgobj);<br /> document.getelementbyid("msgdiv").removechild(title);<br /> document.body.removechild(msgobj);<br /> }<br /> document.body.appendchild(msgobj);<br /> document.getelementbyid("msgdiv").appendchild(title);<br /> var txt=document.createelement("p");<br /> txt.style.margin="1em 0"<br /> txt.setattribute("id","msgtxt");<br /> txt.innerhtml=str;<br /> document.getelementbyid("msgdiv").appendchild(txt);<br /> } </p> <p>
[ctrl+a 全选 注:如需引入外部js需刷新才能执行]