<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>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;
}
a:link,
a:visited{
text-decoration:none;
color:#000;
}
a:hover{
text-decoration:underline;
color:#F00;
}
html,body{
height:100%;
}
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;
}
#window{
position:absolute;
left:50%;
top:50%;
width:400px;
height:180px;
margin:-90px 0 0 -200px;
}
#win-tl{
margin:0 auto;
width:394px;
padding-left:6px;
color:#15428b;
font:bold 12px tahoma,arial,verdana,sans-serif;
background:transparent url(http://www.yaohaixiao.com/code/alertbox/img/window/left-corners.png) no-repeat 0 0;
zoom:1;
height:24px;
}
#win-tl h2{
float:left;
width:369px;
height:16px;
overflow:hidden;
padding:4px 0 4px 0;
background:transparent url(http://www.yaohaixiao.com/code/alertbox/img/window/top-bottom.png) 0 0 repeat-x;
font-size:12px;
line-height:16px;
}
#win-tl h2 img{
float:left;
width:16px;
height:16px;
margin:0 5px 0 3px;
display:inline;
vertical-align:middle;
}
#closebar{
float:left;
width:15px;
height:15px;
text-align:right;
padding:5px 4px 4px 0;
background:transparent url(http://www.yaohaixiao.com/code/alertbox/img/window/top-bottom.png) 0 0 repeat-x;
overflow:hidden;
}
#closebar a:link,
#closebar a:visited{
width:255px;
height:15px;
overflow:hidden;
display:block;
margin-left:4px;
text-indent:-420px;
color:transparent;
background:url(http://www.yaohaixiao.com/code/alertbox/img/tool-sprites.gif) 0 0 no-repeat;
}
#closebar a:hover,
#closebar a:active{
background:url(http://www.yaohaixiao.com/code/alertbox/img/tool-sprites.gif) -15px 0 no-repeat;
}
#win-tr{
float:right;
height:24px;
width:6px;
font-size:1px;
overflow:hidden;
background-image:url(http://www.yaohaixiao.com/code/alertbox/img/window/right-corners.png);
}
#msg-content{
margin:0 auto;
width:400px;
height:150px;
overflow:hidden;
}
#msg-leftbar{
float:left;
width:6px;
height:150px;
overflow:hidden;
background:transparent url(http://www.yaohaixiao.com/code/alertbox/img/window/left-right.png) 0 0 repeat-y;
}
#msg-rightbar{
float:right;
width:6px;
height:150px;
overflow:hidden;
background:transparent url(http://www.yaohaixiao.com/code/alertbox/img/window/left-right.png) -6px 0 repeat-y;
}
#msg{
float:left;
width:386px;
height:148px;
border:1px solid #84A0C4;
background-color:#DFE8F6;
color:#15428b;
}
#info{
margin:0 auto;
width:294px;
height:58px;
padding:35px 10px 10px 82px;
background:#DFE8F6 url(http://www.yaohaixiao.com/code/alertbox/img/window/icon-info.gif) 30px 38px no-repeat;
text-align:left;
overflow:hidden;
}
#info h3{
font-size:12px;
height:12px;
overflow:hidden;
letter-spacing:1px;
padding-bottom:5px;
}
#info p{
line-height:150%;
padding-right:30px;
}
#btns{
margin:0 auto;
width:230px;
height:22px;
text-align:center;
}
#btns a:link,
#btns a:visited{
margin:0 auto;
width:68px;
height:20px;
overflow:hidden;
font-size:12px;
display:block;
text-indent:-999px;
background-image:url(http://www.yaohaixiao.com/code/alertbox/img/btnEnter-normal.gif);
}
#btns a:hover,
#btns a:active{
background-image:url(http://www.yaohaixiao.com/code/alertbox/img/btnEnter-hover.gif);
}
#msg-bottom{
height:6px;
width:400px;
margin:0 auto;
overflow:hidden;
background:transparent url(http://www.yaohaixiao.com/code/alertbox/img/window/top-bottom.png) 0 -294px repeat-x;
}
#msg-bottom-right{
float:right;
width:6px;
height:6px;
overflow:hiddden;
background:transparent url(http://www.yaohaixiao.com/code/alertbox/img/window/right-corners.png) 0 -294px no-repeat;
}
#msg-bottom-left{
float:left;
width:6px;
height:6px;
overflow:hiddden;
background:transparent url(http://www.yaohaixiao.com/code/alertbox/img/window/left-corners.png) 0 -294px no-repeat;
}
-->
</style>
<script language="javascript" type="text/javascript">
<!--
function CreateDiv(){
var btnShow = document.getElementById("btnshow");
if(!btnShow) return false;
btnShow.disabled=true;
// 判断是否为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","window");
obj.style.zIndex="999";
var divTitle = document.createElement("div");
divTitle.setAttribute("id","win-tl");
var H2 = document.createElement("h2");
var IMG=document.createElement("img");
IMG.setAttribute("src","img/win.png");
IMG.setAttribute("alt","Window-Icon");
var txtTitle=document.createTextNode("爱唱卡充值");
H2.appendChild(IMG);
H2.appendChild(txtTitle);
var closeBar=document.createElement("div");
closeBar.setAttribute("id","closebar");
var A = document.createElement("a");
A.innerHTML="关闭窗口";
A.setAttribute("href","#1");
A.setAttribute("id","btnClose");
A.setAttribute("title","关闭窗口");
closeBar.appendChild(A);
var titleRight=document.createElement("div");
titleRight.setAttribute("id","win-tr");
divTitle.appendChild(H2);
divTitle.appendChild(closeBar);
divTitle.appendChild(titleRight);
var Container = document.createElement("div");
Container.setAttribute("id","msg-content");
var cntLeft=document.createElement("div");
cntLeft.setAttribute("id","msg-leftbar");
var MSG=document.createElement("div");
MSG.setAttribute("id","msg");
var INFO=document.createElement("div");
INFO.setAttribute("id","info");
var H3 = document.createElement("h3");
H3.innerHTML="恭喜您充值成功！";
var P = document.createElement("p");
P.innerHTML="充值单号为：<strong id=/"txtuid/">1653235</strong>（请您牢记，便于查询）";
INFO.appendChild(H3);
INFO.appendChild(P);
var Btns=document.createElement("div");
Btns.setAttribute("id","btns");
var btnEnter=document.createElement("a");
btnEnter.setAttribute("id","btnEnter");
btnEnter.setAttribute("href","#1");
var txtEnter=document.createTextNode("确定");
btnEnter.appendChild(txtEnter);
Btns.appendChild(btnEnter);
MSG.appendChild(INFO);
MSG.appendChild(Btns);
var cntRight=document.createElement("div");
cntRight.setAttribute("id","msg-rightbar");
Container.appendChild(cntLeft);
Container.appendChild(MSG);
Container.appendChild(cntRight);
var msgBottom = document.createElement("div");
msgBottom.setAttribute("id","msg-bottom");
var msgBLeft=document.createElement("div");
msgBLeft.setAttribute("id","msg-bottom-left");
var msgBRight=document.createElement("div");
msgBRight.setAttribute("id","msg-bottom-right");
msgBottom.appendChild(msgBLeft);
msgBottom.appendChild(msgBRight);
document.body.appendChild(shadow);
obj.appendChild(divTitle);
obj.appendChild(Container);
obj.appendChild(msgBottom);
document.body.appendChild(obj);
hiddenDiv();
}
function hiddenDiv(){
var objId = document.getElementById("window");
var shadow = document.getElementById("shadow");
var aClose = document.getElementById("btnClose");
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="显示信息层" />
</body>
</html>
