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

更新时间：2007年10月25日 11:49:30 作者：

类似于新浪邮箱的提示效果。比较独立。在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>测试</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>             <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提示效果

兼容ie和firefox版本的js反选全选多选框
兼容ie和firefox版本的js反选全选多选框...
2007-10-10
为radio类型的INPUT添加客户端脚本(附加实现JS来禁用onClick事件思路代码)
为radio类型的INPUT添加客户端脚本(附加实现JS来禁用onClick事件思路代码)，需要的朋友可以参考下。
2010-11-11
勾选时激活input 否则禁用的javascript代码
唯一的可去之外是加了一点美化，使用户体验更加一层楼，其中包括边框的加粗，焦点的获取，checkbox边框线的隐藏等等。
2009-12-12
输入文字自动变化宽度的INPUT,带计数（图）
随着输入文字的多少自动变化宽度的INPUT，带计数
2008-11-11
javascript 双击文本框编辑功能代码
javascript 双击文字后实现编辑文本功能代码
2008-12-12
下拉菜单
下拉菜单...
2006-07-07
HTML-CSS群中单选引发的“事件”
HTML-CSS群中单选引发的“事件”...
2007-03-03
javascript 表单中浏览文件的“浏览”按钮修改
在表单中实现浏览文件的功能，比较简短的代码。
2009-10-10
javascript下一种表单元素获取方法存在的问题
在工作中, 我常看到这样一种获取表单元素的方法:var eles = document.forms['表单名'].elements['元素名']; 如果对获取到的结果进行遍历操作, 那么, 我要告诉你: 小心, eles.length的值可能为undefined.
2010-01-01
js 操作select相关方法函数
select的操作实现代码。方便控制select的朋友。脚本之家之前提供很多相关的代码。
2009-12-12