<!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>div 遮罩层 弹窗</title> <style type="text/css"> #Layer1 { height: 250px; width: 450px; border: 5px solid #999; margin-right: auto; margin-left: auto; z-index: 50; display: none; position: relative; background-color: #FFF; } #Layer1 #win_top { height: 30px; width: 450px; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #999; line-height: 30px; color: #666; font-family: "微软雅黑", Verdana, sans-serif, "宋体"; font-weight: bold; text-indent: 1em; } #Layer1 #win_top a { float: right; margin-right: 5px; } #shade { background-color:#000; position:absolute; z-index:49; display:none; width:100%; height:100%; opacity:0.6; filter: alpha(opacity=60); -moz-opacity: 0.6; margin: 0px; left: 0px; top: 0px; right: 0px; bottom: 0px; } #Layer1 .content { margin-top: 5px; margin-right: 30px; margin-left: 30px; } body { } </style> </head> <body> <div id="shade"></div> <a href="#" onClick="shade.style.display='block';Layer1.style.display='block'">打开</a> <br /> <br /> <br /> <br /> <div id="Layer1"> <div id="win_top">雅比斯 - 我的个人代码库 <a href="#" onClick="shade.style.display='none';Layer1.style.display='none'">关闭</a></div> <br /> <div class="content"><a href="http://www.chinayabisi.com" target="_blank">http://www.chinayabisi.com</a></div> </div> </body> </html>
说明：
#shade的高度设置的大一些就可以遮罩整个页面
以下代码放置在body 开始位置 就可以在页面居中，不居中自己再调试一把吧
<div id="Layer1"> <div id="win_top">雅比斯 - 我的个人代码库 <a href="#" onClick="shade.style.display='none';Layer1.style.display='none'">关闭</a></div> <br /> <div class="content"><a href="http://www.chinayabisi.com" target="_blank">http://www.chinayabisi.com</a></div> </div>