用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提示效果

工作中常用到的JS表单验证代码(包括例子)
下面的代码是对一些表单经常需要验证的一些函数，方便大家使用。
2010-11-11
Javascript实现图片不间断滚动的代码
这篇文章主要分享一段js图片不间断滚动的代码,蛮优秀的,需要的朋友可以参考下。
2016-06-06
b/s开发常用javaScript技术
b/s开发常用javaScript技术...
2006-09-09
Div Select挡住的解决办法
但是div可以盖iframe，而iframe可以盖select, 所以，把一个iframe来当作div的底，
2008-08-08
javascript 操作select下拉列表框的一点小经验
今天客户对项目提出新需求，要求商品品牌不但能选择，还要能够录入，而且录入的品牌名称必须是下拉列表框里面的相（由于商品品牌太多，不好选择，所以有此要求；在此将我的处理方法记录一下）。
2010-03-03
javascript 遍历验证所有文本框的值
遍历所有文本框的值并判断是否为数字
2009-08-08
TextArea 控件的最大长度问题(js json)
javascript json实现textarea最大长度的控制实现代码，需要的朋友可以测试下。代码写的很漂亮。
2009-12-12
javascript中input中readonly和disabled区别介绍
javascript中input中readonly和disabled区别，在开发中可能会常有用到，利用js动态改变input的属性
2012-10-10
JS+CSS模拟IP输入框
JS+CSS模拟IP输入框...
2006-09-09
js限制文本框只能输入数字(正则表达式)
让文本框只能输入数字也是我们非常常用的一种功能，很多程序中涉及的例如财务、销售等等领域的地方，想要限制用户的输入是非常必要的，如果不能限制用户的输入内容的合法性，轻则系统异常，重则数据错误，所以对用户输入域的合法性验证或限制不容小觑
2012-07-07

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

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具