用javascript实现改善用户体验之alert提示效果_表单特效

类似于新浪邮箱的提示效果。比较独立。在wenming版主的帮助下，已解决了高度不能适应的BUG。使用方法很简单，在需要弹出提示的页面先引用alert.js脚本文件,如:
程序代码
<script type="text/javascript" src="alert.js"></script>
然后直接在需要提出处使用：
程序代码
sAlert("需要提示的信息");
即可.不需要额外添加HTML代码.
完整代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" target="_blank">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>"> <html xmlns="<a href="http://www.w3.org/1999/xhtml" target="_blank">http://www.w3.org/1999/xhtml</a>" xml:lang="zh-CN" lang="zh-CN">     <head>         <title>             脚本之家</title>         <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />         <meta http-equiv="Content-Language" content="gb2312" />         <style type="text/css">             *{                 margin:0;padding:0;             }         </style>     </head>     <body>          <div class="cecmbody" id="cecmpolicy">         <div class="leftClass">              <p>测试<span style="display:none">PEPHTML5中文学习网 - HTML5先行者学习网</span></p><p>测试<span style="display:none">PEPHTML5中文学习网 - HTML5先行者学习网</span></p>             <p>测试<span style="display:none">PEPHTML5中文学习网 - HTML5先行者学习网</span></p><p>测试<span style="display:none">PEPHTML5中文学习网 - HTML5先行者学习网</span></p><p>测试<span style="display:none">PEPHTML5中文学习网 - HTML5先行者学习网</span></p><p>测试<span style="display:none">PEPHTML5中文学习网 - HTML5先行者学习网</span></p><p>测试<span style="display:none">PEPHTML5中文学习网 - HTML5先行者学习网</span></p>             <p>测试<span style="display:none">PEPHTML5中文学习网 - HTML5先行者学习网</span></p><p>测试<span style="display:none">PEPHTML5中文学习网 - HTML5先行者学习网</span></p><p>测试<span style="display:none">PEPHTML5中文学习网 - HTML5先行者学习网</span></p><p>测试<span style="display:none">PEPHTML5中文学习网 - HTML5先行者学习网</span></p><p>测试<span style="display:none">PEPHTML5中文学习网 - HTML5先行者学习网</span></p><p>测试<span style="display:none">PEPHTML5中文学习网 - HTML5先行者学习网</span></p><p>测试<span style="display:none">PEPHTML5中文学习网 - HTML5先行者学习网</span></p><p>测试<span style="display:none">PEPHTML5中文学习网 - HTML5先行者学习网</span></p>             <input type="button" value="点击这里" onclick="sAlert('测试效果');" />                  </div>         <div class="rightClass">         </div>         </div>                 <script type="text/javascript" language="javascript"> //Author:Daviv //Blog:<a href="http://blog.163.com/<a href="http://www.iwcn.net" target="_blank">jxdawei</a>" target="_blank">http://blog.163.com/<a href="http://www.iwcn.net" target="_blank">jxdawei</a></a> //Date:2006-10-27 //Email:<a href="http://www.iwcn.net" target="_blank">jxdawei</a>@gmail.com             function sAlert(str){             var msgw,msgh,bordercolor;             msgw=400;//提示窗口的宽度             msgh=100;//提示窗口的高度             titleheight=25 //提示窗口标题高度             bordercolor="#336699";//提示窗口的边框颜色             titlecolor="#99CCFF";//提示窗口的标题颜色                          var sWidth,sHeight;             sWidth=document.body.offsetWidth;             sHeight=screen.height;             var bgObj=document.createElement("div");             bgObj.setAttribute('id','bgDiv');             bgObj.style.position="absolute";             bgObj.style.top="0";             bgObj.style.background="#777";             bgObj.style.filter="progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75";             bgObj.style.opacity="0.6";             bgObj.style.left="0";             bgObj.style.width=sWidth + "px";             bgObj.style.height=sHeight + "px";             bgObj.style.zIndex = "10000";             document.body.appendChild(bgObj);                          var msgObj=document.createElement("div")             msgObj.setAttribute("id","msgDiv");             msgObj.setAttribute("align","center");             msgObj.style.background="white";             msgObj.style.border="1px solid " + bordercolor;             msgObj.style.position = "absolute";             msgObj.style.left = "50%";             msgObj.style.top = "50%";             msgObj.style.font="12px/1.6em Verdana, Geneva, Arial, Helvetica, sans-serif";             msgObj.style.marginLeft = "-225px" ;             msgObj.style.marginTop = -75+document.documentElement.scrollTop+"px";             msgObj.style.width = msgw + "px";             msgObj.style.height =msgh + "px";             msgObj.style.textAlign = "center";             msgObj.style.lineHeight ="25px";             msgObj.style.zIndex = "10001";                var title=document.createElement("h4");            title.setAttribute("id","msgTitle");            title.setAttribute("align","right");            title.style.margin="0";            title.style.padding="3px";            title.style.background=bordercolor;            title.style.filter="progid:DXImageTransform.Microsoft.Alpha(startX=20, startY=20, finishX=100, finishY=100,style=1,opacity=75,finishOpacity=100);";            title.style.opacity="0.75";            title.style.border="1px solid " + bordercolor;            title.style.height="18px";            title.style.font="12px Verdana, Geneva, Arial, Helvetica, sans-serif";            title.style.color="white";            title.style.cursor="pointer";            title.innerHTML="关闭";            title.onclick=function(){                 document.body.removeChild(bgObj);                 document.getElementById("msgDiv").removeChild(title);                 document.body.removeChild(msgObj);                 }            document.body.appendChild(msgObj);            document.getElementById("msgDiv").appendChild(title);            var txt=document.createElement("p");            txt.style.margin="1em 0"            txt.setAttribute("id","msgTxt");            txt.innerHTML=str;            document.getElementById("msgDiv").appendChild(txt);             }         </script>     </body> </html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

用javascript实现改善用户体验之alert提示效果_表单特效_