bhcode 2008-8-9 15:09
模拟ightbox提示框特效
[code]<!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,
#window-title a:link,
#window-title a:hover,
#window-title a:visited{
float:right;
margin-right:4px;
display:blcok;
width:16px;
height:14px;
color:#ffffff;
background-image:url(close.gif) #fff;
overflow:hidden;
/*
text-indent:-200px;
*/
font-size:14px;
}
#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">
<!--
function CreateDiv(){
var btnShow = document.getElementById("btnshow");
if(!btnShow) return false;
var isOpear=(navigator.userAgent.indexOf('Opera')>-1);
var shadow = document.createElement("div");// 创建透明阴影遮照效果层
// 给新创建的节点设置各个属性
shadow.setAttribute("id","shadow");
shadow.style.position="absolute"; //
shadow.style.left="0";
shadow.style.top="0";
shadow.style.width=screen.width;////////////////
shadow.style.height=screen.height;//////////////
shadow.style.zIndex="10";
if(!isOpear){// 如果是Opera浏览器则给shadow设置背景色和透明效果
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.href="#";
A.id="aClose";
A.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);// 将确定按钮追加到确定表单中
document.body.appendChild(shadow);// 将通明阴影层追加到页面（body节点）中
obj.appendChild(divTitle);// 将标题栏追加到提示框节点中
obj.appendChild(Container);// 将提示正文内容追加到提示框节点中
obj.appendChild(frmEnter);// 将确定表单追加到提示框节点中
document.body.appendChild(obj);// 将提示框节点追加到页面（body节点）中
hiddenDiv(); // 设置关闭按钮和确定按钮的处理函数功能
}
function hiddenDiv(){
var objId = document.getElementById("confirmInfo");
var shadow = document.getElementById("shadow");
var aClose = document.getElementById("aClose");
var btnEnter = document.getElementById("btnEnter");
var btnShow = document.getElementById("btnshow");
if(!shadow || !objId || !aClose || !btnEnter || !btnShow) { // 如果节点(阴影/提示框/关闭按钮/确定按钮)有一个不存在,则退出(免报错)
return false;
}
else{
btnEnter.onclick=aClose.onclick=function(){// 设置关闭和确定按钮的功能--关闭(移除)提示框
document.body.removeChild(objId);
document.body.removeChild(shadow);
btnShow.disabled=false; // "显示信息层"按钮可用
}
}
}
//-->
</script>
</head>
<body>
<input name="btnshow" id="btnshow" type="button" onclick="CreateDiv()" value="显示信息层" />
<input name="btnshow2" id="btnshow2" type="button"onclick="CreateDiv()" value="显示信息层" />
</body>
</html>[/code]