jiangzaiwu2012-10-15 11:01:40
html DIV始终垂直居中的半透明弹出层特效源代码下载
html DIV始终垂直居中的半透明弹出层特效
<!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>始终居中的弹出层-www.zuidaima.com-最代码</title> <style type="text/css"> <!-- html,body {height:100%; margin:0px; font-size:12px;} .mydiv { background-color: #FFCC66; border: 1px solid #f00; text-align: center; line-height: 40px; font-size: 12px; font-weight: bold; z-index:999; width: 300px; height: 120px; left:50%; top:50%; margin-left:-150px!important;/*FF IE7 该值为本身宽的一半 */ margin-top:-60px!important;/*FF IE7 该值为本身高的一半*/ margin-top:0px; position:fixed!important;/* FF IE7*/ position:absolute;/*IE6*/ _top: expression(eval(document.compatMode && document.compatMode=='CSS1Compat') ? documentElement.scrollTop + (document.documentElement.clientHeight-this.offsetHeight)/2 :/*IE6*/ document.body.scrollTop + (document.body.clientHeight - this.clientHeight)/2);/*IE5 IE5.5*/ } .bg,.popIframe { background-color: #666; display:none; width: 100%; height: 100%; left:0; top:0;/*FF IE7*/ filter:alpha(opacity=50);/*IE*/ opacity:0.5;/*FF*/ z-index:1; position:fixed!important;/*FF IE7*/ position:absolute;/*IE6*/ _top: expression(eval(document.compatMode && document.compatMode=='CSS1Compat') ? documentElement.scrollTop + (document.documentElement.clientHeight-this.offsetHeight)/2 :/*IE6*/ document.body.scrollTop + (document.body.clientHeight - this.clientHeight)/2); } .popIframe { filter:alpha(opacity=0);/*IE*/ opacity:0;/*FF*/ } --> </style> <script language="javascript" type="text/javascript"> function showDiv(){ document.getElementById('popDiv').style.display='block'; document.getElementById('popIframe').style.display='block'; document.getElementById('bg').style.display='block'; } function closeDiv(){ document.getElementById('popDiv').style.display='none'; document.getElementById('bg').style.display='none'; document.getElementById('popIframe').style.display='none'; } </script> </head> <body> <div id="popDiv" class="mydiv" style="display:none;">最代码网站欢迎你!<br/>网站:http://www.zuidaima.com/<br/> <a href="javascript:closeDiv()">关闭窗口</a></div> <div id="bg" class="bg" style="display:none;"></div> <a href="javascript:showDiv()">点击这里弹出层</a> <iframe id='popIframe' class='popIframe' frameborder='0' ></iframe> </body> </html>
由最代码官方编辑于2014-8-27 15:54:46
猜你喜欢
请下载代码后再发表评论


疾风知劲草 LV82021年3月10日
1814080902304 LV42021年1月5日
tsy666666 LV82020年3月1日
1910356574 LV142020年1月2日
yangtongyong LV142019年11月6日
ranqingju588888 LV82019年2月12日
1718142421 LV12018年12月29日
1647859661 LV12018年12月29日
木水包 LV162018年7月3日
2309094456 LV122018年3月29日

小熊专属 LV32021年12月15日
qyxs6662021年7月12日
暂无贡献等级
nibin576 LV62021年3月11日
疾风知劲草 LV82021年3月10日
喵小兵 LV102021年3月9日
zui07272021年1月28日
暂无贡献等级
1814080902304 LV42021年1月5日
张胜男 LV12020年12月10日
秦sir3067683450 LV102020年10月30日
sjl20000221 LV22020年9月8日