AJAX之lightBox
Lightbox的效果类似于WinXP操作系统的注销/关机对话框,除去屏幕中心位置的对话框,其他的区域都以淡出的效果逐渐变为银灰色以增加对比度,此时除了对话框内的表单控件,没有其他区域可以获取焦点。
Lightbox的作用则相当于从前只在IE中被支持的"Modal Dialog";现在在FireFox也可用window.open(url, name, " modal=yes ");
来实现同样的效果。使用"Modal Dialog"将限制用户的操作于弹出的对话框中,只有完成设定好的操作后方才关闭。在一些逻辑敏感的应用中强制吸引用户的注意力以防止用户的误操作导致程序逻辑淆乱。
其实 Lightbox 并不新鲜,在前年Ajax未诞生之前,它是以 "Inline Popup"的名号出现的。诞生的原因是因为屏蔽弹出窗口的技术纷纷被浏览器采用,而浏览器厂商间也没有一个统一的 Popup 解决方案。当时我记得还有一些说"Inline Popup"破解了弹出窗口屏蔽的报道。
"Inline Popup" 并不被很多人关注,不过我还是发现国内的163信箱去年改版推出的时候大量使用了此效果。Ajax 名正言顺之时,"Inline Popup"也重装再现了,并换了一个有美感的名字 "Lightbox"。
第一次使用WinXP的时候,关机时的阴暗渐变效果让我颇为惊艳。利用Lightbox引导用户的注意力完成预先设定的操作,良好的对比度效果营造温和的视觉氛围。相信在当前交互界面日益接近桌面的Web应用中,Lightbox 也将会成为Ajax的重要设计模式之一。
使用方法:
http://www.huddletogether.com/projects/lightbox2/
http://www.huddletogether.com/projects/lightbox/
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/None.gif)
4
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
5
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
6
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
7
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
8
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.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/ExpandedBlockEnd.gif)
69
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
70
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)