日期:2014-05-18 浏览次数:20220 次
仿lightbox的透明遮招的效果
以下是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.cre