1、可以覆盖父窗口，做了关闭按钮。
<html> <head> <script> function locking(){ document.all.ly.style.display="block"; document.all.ly.style.width=document.body.clientWidth; document.all.ly.style.height=document.body.clientHeight; document.all.Layer2.style.display='block'; } function Lock_CheckForm(theForm){ document.all.ly.style.display='none';document.all.Layer2.style.display='none'; return false; } </script> <style type="text/css"> <!-- .STYLE1 {font-size: 12px} a:link { color: #FFFFFF; text-decoration: none; } a:visited { text-decoration: none; } a:hover { text-decoration: none; } a:active { text-decoration: none; } --> </style> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"></meta></head> <body> <p align="center"> <input type="button" value="弹出DIV" onClick="locking()" /> </p> <div id="ly" style="position: absolute; top: 0px; filter: alpha(opacity=60); background-color: #777; z-index: 2; left: 0px; display: none;"> </div> <!-- 浮层框架开始 --> <div id="Layer2" align="center" style="position: absolute; z-index: 3; left: expression((document.body.offsetWidth-540)/2); top: expression((document.body.offsetHeight-170)/10); background-color: #fff; display: none;" > <table width="540" height="300" border="0" cellpadding="0" cellspacing="0" style="border: 0 solid #e7e3e7; border-collapse: collapse ;" > <tr> <td style="background-color: #73A2d6; color: #fff; padding-left: 4px; padding-top: 2px; font-weight: bold; font-size: 12px;" height="10" valign="middle"> <div align="right"><a href=JavaScript:; class="STYLE1" onclick="Lock_CheckForm(this);">[关闭]</a> </div></td> </tr> <tr> <td height="130" align="center"> </td> </tr> </table> </div> <!-- 浮层框架结束 --> </body> </html>
提示：你可以先修改部分代码再运行。
阅读全文...
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>弹出层效果</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:99; width: 300px; height: 120px; left:50%;/*FF IE7*/ top:50%;/*FF IE7*/ 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 { background-color: #666; 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);/*IE5 IE5.5*/ } --> </style> <script language="javascript" type="text/javascript"> function showDiv(){ document.getElementById('popDiv').style.display='block'; document.getElementById('bg').style.display='block'; } function closeDiv(){ document.getElementById('popDiv').style.display='none'; document.getElementById('bg').style.display='none'; } </script> </head> <body> <div id="popDiv" class="mydiv" style="display:none;">弹出窗口 <a href="http://www.5jun.com">www.5jun.com</a> <a href="javascript:closeDiv()">关闭窗口</a></div> <div id="bg" class="bg" style="display:none;"></div> <div style="height:200px; line-height:200px; text-align:center; background:#FFFFCC;"><a href="javascript:showDiv()">点我,弹出层</a></div> </body> </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=utf-8" /> <title>鼠标经过弹出层5jun.com</title> <style type="text/css"> <!-- #box{display:none; width: 300px; height: 180px; background:#345;text-align:center; line-height:180px; color:#fff; } --> </style> <script type="text/javascript" language="javascript" > <!-- function display(){ document.getElementById("box").style.display="block"; } function disappear(){ document.getElementById("box").style.display="none"; } --> </script> </head> <body> <a href="#" onmouseover="display()" onmouseout="disappear()">鼠标移到这里看看...</a> <div id="box" onmouseover="display()" onmouseout="disappear()">嘿嘿！这就是弹出层。</div> </body> </html>
