以下是HTML网页特效代码，点击运行按钮可查看效果： <!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> <a href="http://js.alixixi.com/">欢迎访问阿里西西网页特效代码站，js.alixixi.com</a> [提示：可先修改代码再按运行]
2008-8-2 
佚名 
