HTML单击按钮弹出悬浮窗+页面遮罩
原创
<html>
<head lang="en">
<head>
<meta charset="UTF-8">
<meta charset="utf-8" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
<style>
.black_overlay {
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: #222;
z-index: 1001;
-moz-opacity: 0.8;
opacity: .80;
filter: alpha(opacity=78);
}
.pop_win {
display: none;
position: absolute;
top: 10%;
left: 20%;
width: 60%;
height: 75%;
padding: 10px;
border: 2px solid #3b3e41;
background-color: white;
z-index: 9999;
overflow: auto;
border-radius: 25px;
}
.fancybox-button {
background: rgba(30, 30, 30, .6);
border: 0;
border-radius: 0;
box-shadow: none;
cursor: pointer;
display: inline-block;
height: 44px;
margin: 0;
padding: 10px;
position: relative;
transition: color .2s;
vertical-align: top;
visibility: inherit;
width: 44px;
}
</style>
<script type="text/javascript">
function popWin() {
document.getElementById('light').style.display = 'block';
document.getElementById('fade').style.display = 'block'
}
function closeWin() {
document.getElementById('light').style.display = 'none';
document.getElementById('fade').style.display = 'none'
}
</script>
</head>
<body>
<p>网页：单击按钮弹出悬浮窗+页面遮罩</p>
<a href="javascript:void(0)" onclick="popWin();">请点这里</a>
<div id="light" class="pop_win">
</div>
<div id="fade" class="black_overlay"><a href="javascript:void(0)" onclick="closeWin();" style="float: right;"
class="fancybox-button fancybox-button--close"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 10.6L6.6 5.2 5.2 6.6l5.4 5.4-5.4 5.4 1.4 1.4 5.4-5.4 5.4 5.4 1.4-1.4-5.4-5.4 5.4-5.4-1.4-1.4-5.4 5.4z"></path></svg></a></div>
</body>
</html>
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。