<!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>
时间： 2024-10-05 02:38:19