毛玻璃弹窗效果
2022-10-10 09:45:29 来源：admin 点击：512
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,
minimum-scale=1.0, user-scalable=0">
<meta charset="UTF-8">
<title>CSS3毛玻璃效果</title>
<style>
body.on .filter-blur {
filter: blur(2px);
-moz-filter: blur(2px);
-webkit-filter: blur(2px);
}
body.on .mask {
display: block;
}
img {
max-width: 100%;
}
.mask {
/*全屏遮罩*/
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: rgba(192,192,192,0.2);
display: none;
}
.mask .pop {
position: absolute;
left: 50%;
top: 50%;
/*css3水平垂直居中*/
transform: translate(-50%, -50%);
width: 200px;
height: 120px;
background: #6A6A6A;
border: 1px solid #464646;
border-radius: 5px;
box-shadow: 0 0 15px #464646;
}
</style>
</head>
<body class="">
<div>
<input type="button" value="显示弹窗" id="js_btn">
<p><img src="https://www.baidu.com/img/bd_logo1.png" alt=""></p>
<p>测试文本</p>
<p>测试文本</p>
<p>测试文本</p>
<p>测试文本</p>
</div>
<div id="js_mask">
<div id="js_pop">弹出框内容</div>
</div>
<script>
// 绑定弹窗事件
document.getElementById("js_btn").addEventListener('click', function(){
document.body.className="on";
}, false);
// 点击遮罩隐藏弹窗
document.getElementById("js_mask").addEventListener('click', function(){
document.body.className="";
}, false);
// 点击弹窗阻止事件冒泡
document.getElementById("js_pop").addEventListener('click', function(e){
e.stopPropagation();
}, false);
</script>
</body>
</html>