改善用户体验之alert提示效果[转]

如同Lightbox的效果那边，或者说和Windows关闭系统前的那一刻类似，为突出显示主题而采取的暗淡背景的方法在Web2.0的站点风格中被越来越多的使用。

程序代码：(您可以把以下代码保存成html文件看看效果)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang= ... sp;lang="zh-CN">
 <head>
 <meta name="verify-v1" content="P4T6fFCiPVxqMWZ2eztyXVzMHlnwD0wLQOq6LBHN5Y8=" />
 <title>
 政策文件_中国电力工程造价信息网</title>
 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 <meta http-equiv="Content-Language" content="gb2312" />
 <meta name="KeyWords" content="电力工程造价,价格信息,装材,设备,电力工程" />
 <meta name="description" content="电力工程造价信息" />
 <style type="text/css">
 *{
 margin:0;padding:0;
 }
 </style>
 </head>
 <body>


 <div class="cecmbody" id="cecmpolicy">
 <div class="leftClass">

测试测试
 测试测试测试测试测试
 测试测试测试测试测试测试测试测试
 测试测试测试测试测试测试测试测试
 <input type="button" value="点击这里" onclick="sAlert('测试效果');" />
 测试测试测试测试
 测试测试测试测试测试测试测试测试
 测试测试测试测试测试测试测试测试
 测试测试测试测试测试测试测试测试

 </div>
 <div class="rightClass">
 </div>
 </div>
 <script type="text/javascript" language="javascript">
 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=document.body.offsetHeight;

 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 = (msgh-titleheight) + "px";
 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>

使用方法很简单，在需要弹出提示的页面先
<script type="text/javascript" src="alert.js"></script>

然后直接在需要提出处使用：
sAlert("需要提示的信息")

转自：天牢囚犯'S BLOG

posted @ 2006-12-25 14:46 碧血黄沙-java、c# 阅读(446) 评论(0) 编辑收藏举报

刷新页面返回顶部

碧血黄沙

别人是说了再做，我是做了再说；别人说了不一定做，我是做了不一定说。

改善用户体验之alert提示效果[转]

公告