今天给公司写页面的时候需要做一个访lightbox的透明遮招的效果，就整理里了下，发个出来给大家看看，呵呵，其实这里以前也有朋友制作过，这里我把自己写的贴出来，会的朋友就帮我看看，哪里需要改进的。不会的朋友更是要来看看啊，呵呵，不扯了，看看代码吧！
演示地址：
http://www.yaohaixiao.com/code/alertbox/index.htm复制内容到剪贴板
代码:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>模拟ightbox提示框DEMO</title>
<style type="text/css">
<!--
*{
margin:0;
padding:0;
}
body{
background-color:#FFF;
color:#000;
text-align:center;
font:normal 12px Georgia, "Times New Roman", Times, serif;
}
img{
max-width:100%;
height:auto;
border:0;
}
ul,dl{
list-style-type:none;
}
.clear{
clear:both;
font-size:1px;
width:1px;
height:1px;
visibility:hidden;
}
div,span,p,h1,h2,h3,h4,h5,h6{
text-align:left;
}
#btnshow{
margin-top:30px;
}
#confirmInfo{
position:absolute;
width:396px;
height:236px;
padding:1px;
border:1px solid #999;
z-index:999;
background-color:#FFF;
left:50%;
top:50%;
margin:-120px 0 0 -200px;
}
#window-title{
width:372px;
height:14px;
padding:5px 0 5px 24px;
background:#0A246A url(ie-icon.gif) 4px 4px no-repeat;
color:#FFF;
}
#window-title h2{
float:left;
width:200px;
height:14px;
overflow:hidden;
font-size:13px;
}
#window-title a:link,
#window-title a:visited,
#window-title a:hover{
float:right;
margin-right:4px;
display:blcok;
width:16px;
height:14px;
color:#FFF;
background-image:url(close.gif);
overflow:hidden;
font-size:14px;
text-indent:-200px;
}
#window-title span a:active{
background-image:url(close-act.gif);
}
#container{
margin:0 auto;
margin-top:1px;
border-top:1px solid #999;
border-bottom:1px solid #FFF;
width:396px;
height:174px;
overflow:hidden;
background-color:#D4D0C8;
}
#container h3{
margin-top:60px;
height:14px;
font-size:14px;
text-align:center;
padding:5px 0;
}
#container p{
margin:0 auto;
width:380px;
line-height:150%;
font-size:14px;
height:auto;
text-align:center;
}
#frmEnter{
margin:0 auto;
height:22px;
padding:6px 5px 6px 6px;
border-top:1px solid #999;
width:385px;
text-align:right;
background-color:#D4D0C8;
}
-->
</style>
<script language="javascript" type="text/javascript">
<!--
/***
函数名称：Create()
函数功能：创建提示框信息层和透明遮照效果层
实现原理：1、利用docment.createElement()方法动态创建节点，在通过
使用appenChild()方法，给body节点动态添加节点。
2、position:absolute--将节点的position设置为absolute,
利用absolute的特性，position:absolute的节点的特点是
不影响其周围节点的布局。所以我们将遮照层的position属
性设置为absolute,这样遮照层即使覆盖了整个页面，但是
却不影响其他节点的（正文）布局。
3、遮照层--就是要覆盖到其他层上面，所以我们就设置了一个
z-index:10;让它覆盖到正文之上（或者说他比较厚，把其
的节点都包起来了）。但是我们把提示框的z-index设置为
999从而使它在最上面显示，模拟出提示框的效果。
4、透明--原本的遮照层是蓝色的背景，是会把它下面的正文全
部遮住，但是我们使用了filter（IE）和 opacity属性设置
层是透明的，以便让正文得以显示。
5、使用removeChilde()方法移除提示框节点。
6、提示框居中--其实很简单，left:50%,top:50%;然后就是设置
margin:-(提示框高/2)px 0 0 -(提示框宽/2)px;
参数说明：无参数
返 回 值：无返回值
***/
function CreateDiv(){
// 判断是否为Opear浏览器
var isOpear=(navigator.userAgent.indexOf('Opera')>-1);
// 创建透明阴影遮照效果层
var shadow = document.createElement("id");
// 给新创建的节点设置各个属性
shadow.setAttribute("id","shadow");
shadow.style.position="absolute"; //
shadow.style.left="0";
shadow.style.top="0";
shadow.style.width="100%";
shadow.style.height="100%";
shadow.style.zIndex="10";
// 如果是Opera浏览器则给shadow设置背景色和透明效果
if(!isOpear){
shadow.style.backgroundColor="#06C";
if(document.all){
shadow.style.filter = "alpha(opacity=20)";
}
else{
shadow.style.opacity = 0.2;
}
}
// 创建提示框层节点
var obj=document.createElement("div");
obj.setAttribute("id","confirmInfo");
obj.style.zIndex="999";
// 创建提示标题栏节点
var divTitle = document.createElement("div");
divTitle.setAttribute("id","window-title");
// 创建标题节点
var H2 = document.createElement("h2");
H2.innerHTML="爱唱卡充值";
// 创建关闭按钮节点
var A = document.createElement("a");
A.innerHTML="关闭窗口";
A.setAttribute("href","#1");
A.setAttribute("id","aClose");
A.setAttribute("title","关闭窗口");
// 将标题追加到标题栏
divTitle.appendChild(H2);
// 将关闭按钮追加到标题栏
divTitle.appendChild(A);
// 创建提示内容节点
var Container = document.createElement("div");
Container.setAttribute("id","container");
// 创建提示正文标题节点
var H3 = document.createElement("h3");
H3.innerHTML="恭喜您充值成功！";
// 创建提示正文节点
var P = document.createElement("p");
P.innerHTML="充值单号为：<strong id=\"txtuid\">1dfe</strong>（请您牢记，便于查询）";
// 将提示标题追加到提示内容节点中
Container.appendChild(H3);
// 将提示正文追加到提示内容节点中
Container.appendChild(P)
// 创建确定表单节点
var frmEnter = document.createElement("form");
// 设置确定表单各个属性
frmEnter.setAttribute("name","frmEnter");
frmEnter.setAttribute("id","frmEnter");
frmEnter.setAttribute("action","");
frmEnter.setAttribute("method","post");
// 创建确定按钮节点
var btnEnter = document.createElement("input");
btnEnter.setAttribute("name","btnEnter");
btnEnter.setAttribute("id","btnEnter");
btnEnter.setAttribute("type","button");
btnEnter.setAttribute("value"," 确 定 ");
// 将确定按钮追加到确定表单中
frmEnter.appendChild(btnEnter);
// 将通明阴影层追加到页面（body节点）中
document.body.appendChild(shadow);
// 将标题栏追加到提示框节点中
obj.appendChild(divTitle);
// 将提示正文内容追加到提示框节点中
obj.appendChild(Container);
// 将确定表单追加到提示框节点中
obj.appendChild(frmEnter);
// 将提示框节点追加到页面（body节点）中
document.body.appendChild(obj);
// 设置关闭按钮和确定按钮的处理函数功能
hiddenDiv();
}
function hiddenDiv(){
var objId = document.getElementById("confirmInfo");
var shadow = document.getElementById("shadow");
var aClose = document.getElementById("aClose");
var btnEnter = document.getElementById("btnEnter");
/***
如果节点阴影、提示框、关闭按钮或确定按钮，
有一个节点不存在，则退出此程序（避免报错）
***/
if(!shadow || !objId || !aClose || !btnEnter) {
return false;
}
else{
// 设置关闭和确定按钮的功能--关闭(移除)提示框
btnEnter.onclick=aClose.onclick=function(){
document.body.removeChild(objId);
document.body.removeChild(shadow);
}
}
}
//-->
</script>
</head>
<body>
<input name="btnshow" id="btnshow" type="button" onclick="CreateDiv()" value="显示信息层" />
</body>
</html>写得不对的地方还请多多指教啊！
[
本帖最后由 yaohaixiao 于 2008-4-1 19:07 编辑 ]
