<!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>Div+CSS實現始終居中的半透明彈出層丨網頁特效丨CsrCode.Cn</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*/ } --> </style> <script language="javascript" type="text/javascript"> function showDiv(){ document.getElementById('popDiv').style.display='block'; } function closeDiv(){ document.getElementById('popDiv').style.display='none'; } </script> </head> <body> <div class="header"><a href="javascript:showDiv()">點擊這裏彈出層</a></div> <div id="popDiv" class="mydiv" style="display:none;">欣雨歡迎你! <br/>網址:http://www.CsrCode.cn <br/><a href="javascript:closeDiv()">關閉窗口</a></div> </body> </html>