改善用户体验的几个alert提示效果(收集整理)
今天在经典看到有人把这效果独立出来了
http://bbs.blueidea.com/thread-2688074-1-1.html
如同Lightbox的效果那边,或者说和Windows关闭系统前的那一刻类似,为突出显示主题而采取的暗淡背景的方法在Web2.0的站点风格中被越来越多的使用。
(关于Lightbox:http://www.cnbruce.com/blog/showlog.asp?cat_id=34&log_id=1005 )
现在,当弹出千篇一律的Alert警告框被这样的一种方式取代时,给人的感觉是相当的新鲜的。
这样效果一:
http://bbs.blueidea.com/thread-2688074-1-1.html
如同Lightbox的效果那边,或者说和Windows关闭系统前的那一刻类似,为突出显示主题而采取的暗淡背景的方法在Web2.0的站点风格中被越来越多的使用。
(关于Lightbox:http://www.cnbruce.com/blog/showlog.asp?cat_id=34&log_id=1005 )
现在,当弹出千篇一律的Alert警告框被这样的一种方式取代时,给人的感觉是相当的新鲜的。
这样效果一:
1
<input type="button" value="点击这里" onclick="sAlert('测试效果<br>还可以直接书写HTML代码 <br>© 2006');" />
2![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
3
<script type="text/javascript" language="javascript">
4
//Author:Daviv
5
//Blog:http://blog.163.com/jxdawei
6
//Date:2006-10-28
7
//Email:jxdawei@gmail.com
8
function sAlert(str){
9
var msgw,msgh,bordercolor;
10
msgw=400;//提示窗口的宽度
11
msgh=100;//提示窗口的高度
12
bordercolor="#336699";//提示窗口的边框颜色
13
titlecolor="#99CCFF";//提示窗口的标题颜色
14
15
var sWidth,sHeight;
16
sWidth=document.body.offsetWidth;
17
sHeight=document.body.offsetHeight;
18
19![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
20
var bgObj=document.createElement("div");
21
bgObj.setAttribute('id','bgDiv');
22
bgObj.style.position="absolute";
23
bgObj.style.top="0";
24
bgObj.style.background="#777";
25
bgObj.style.filter="progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75";
26
bgObj.style.opacity="0.6";
27
bgObj.style.left="0";
28
bgObj.style.width=sWidth + "px";
29
bgObj.style.height=sHeight + "px";
30
document.body.appendChild(bgObj);
31
var msgObj=document.createElement("div")
32
msgObj.setAttribute("id","msgDiv");
33
msgObj.setAttribute("align","center");
34
msgObj.style.position="absolute";
35
msgObj.style.background="white";
36
msgObj.style.font="12px/1.6em Verdana, Geneva, Arial, Helvetica, sans-serif";
37
msgObj.style.border="1px solid " + bordercolor;
38
msgObj.style.width=msgw + "px";
39
msgObj.style.height=msgh + "px";
40
msgObj.style.top=(document.documentElement.scrollTop + (sHeight-msgh)/2) + "px";
41
msgObj.style.left=(sWidth-msgw)/2 + "px";
42
var title=document.createElement("h4");
43
title.setAttribute("id","msgTitle");
44
title.setAttribute("align","right");
45
title.style.margin="0";
46
title.style.padding="3px";
47
title.style.background=bordercolor;
48
title.style.filter="progid:DXImageTransform.Microsoft.Alpha(startX=20, startY=20, finishX=100, finishY=100,style=1,opacity=75,finishOpacity=100);";
49
title.style.opacity="0.75";
50
title.style.border="1px solid " + bordercolor;
51
title.style.height="18px";
52
title.style.font="12px Verdana, Geneva, Arial, Helvetica, sans-serif";
53
title.style.color="white";
54
title.style.cursor="pointer";
55
title.innerHTML="关闭";
56
title.onclick=function(){
57
document.body.removeChild(bgObj);
58
document.getElementById("msgDiv").removeChild(title);
59
document.body.removeChild(msgObj);
60
}
61
document.body.appendChild(msgObj);
62
document.getElementById("msgDiv").appendChild(title);
63
var txt=document.createElement("p");
64
txt.style.margin="1em 0"
65
txt.setAttribute("id","msgTxt");
66
txt.innerHTML=str;
67
document.getElementById("msgDiv").appendChild(txt);
68
}
69
</script>
70![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
2
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
3
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
4
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
5
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
6
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
7
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
8
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
9
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
10
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
11
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
12
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
13
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
14
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
15
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
16
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
17
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
18
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
19
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
20
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
21
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
22
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
23
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
24
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
25
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
26
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
27
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
28
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
29
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
30
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
31
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
32
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
33
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
34
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
35
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
36
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
37
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
38
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
39
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
40
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
41
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
42
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
43
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
44
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
45
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
46
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
47
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
48
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
49
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
50
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
51
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
52
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
53
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
54
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
55
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
56
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
57
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
58
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
59
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
60
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
61
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
62
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
63
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
64
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
65
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
66
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
67
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
68
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
69
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif)
70
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
把SCRIPT做成一个JS文件就可以了。