html DIV始终垂直居中的半透明弹出层特效源代码下载
html DIV始终垂直居中的半透明弹出层特效
源代码下载地址:http://www.zuidaima.com/share/1550463332846592.htm
<!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/>网站:<a href="http://www.zuidaima.com/">http://www.zuidaima.com/</a><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>
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。