jiangzaiwu
2012-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
猜你喜欢
请下载代码后再发表评论
![最代码相关代码源代码列表](https://static.zuidaima.com/resource/img/heart_ico.png)
![最代码最近下载分享源代码列表](https://static.zuidaima.com/resource/img/heart_ico.png)
疾风知劲草 LV8
2021年3月10日
1814080902304 LV4
2021年1月5日
tsy666666 LV8
2020年3月1日
1910356574 LV14
2020年1月2日
yangtongyong LV15
2019年11月6日
ranqingju588888 LV8
2019年2月12日
1718142421 LV1
2018年12月29日
1647859661 LV1
2018年12月29日
木水包 LV16
2018年7月3日
2309094456 LV12
2018年3月29日
![最代码最近浏览分享源代码列表](https://static.zuidaima.com/resource/img/cattle_ico.png)
1614076596 LV1
2023年6月29日
十年若梦555 LV4
2023年3月1日
炫瓶百事可乐 LV1
2022年12月1日
小熊专属 LV3
2021年12月15日
qyxs666
2021年7月12日
暂无贡献等级
nibin576 LV6
2021年3月11日
疾风知劲草 LV8
2021年3月10日
喵小兵 LV10
2021年3月9日
zui0727
2021年1月28日
暂无贡献等级
1814080902304 LV4
2021年1月5日