[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>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://yuncode.net" target="_blank">http://yuncode.net</a></div>
</div>
</body>
</html>
[代码运行效果截图]
中级程序员
by: 明明 发表于:2017-07-07 13:04:09 顶(0) | 踩(0) 回复
顶一个 想找这个很久了
回复评论