首页 > 代码库 > div 遮罩层 弹窗
div 遮罩层 弹窗
<!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="http://www.mamicode.com/#" 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>
div 遮罩层 弹窗
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。