-->

WEB资讯

您的当前位置:首页 > 资讯 > HTML

毛玻璃弹窗效果

2022-10-10 09:45:29  来源:admin 点击:236

<!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>


相关文章更多 >

© 2024版权所有 水水网

电话:171780793