<!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>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>