<!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) 回复
顶一个 想找这个很久了
回复评论