jquery遮罩层禁止底部内容滑动！！！大坑~

最新推荐文章于 2024-02-15 14:24:21 发布

玉林君

最新推荐文章于 2024-02-15 14:24:21 发布

阅读量1.9k

点赞数

本文链接：https://blog.csdn.net/lin_jiejie/article/details/79182541

版权

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>弹框遮罩层</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
<meta name="keywords" content="关键字搜索">
<meta name="author" content="描述作者资料">
<meta name="description" content="网页描述">
<style>
*{
padding: 0;
margin: 0;
}
html,body{
height: 100%;;
}
.modal-mask{
position: fixed;
z-index: 9998;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,.5);
-webkit-transition: opacity .3s ease;
transition: opacity .3s ease;
/*display: none; 坚决不要使用display：none*/
visibility:hidden;
opacity:0;
}
.modal-container{
background: #fff;
box-shadow: 0 0.02rem 0.02rem rgba(0,0,0,.33);
-webkit-transition: all .3s ease;
transition: all .3s ease;
border-radius: .1rem;
position: fixed;
width: 80%;
min-height: 2rem;
left: 50%;
top: 50%;
margin-left: -40%;
margin-top: -1rem;
z-index: 9999;
visibility:hidden;
opacity:0;
}
.modal-head{
font-size: .28rem;
color: #000;
padding: .2rem 0;
text-align: center;
}
.modal-body{
font-size: .26rem;
color: #6d6b6b;
text-align: center;
line-height: .26rem;
padding-bottom: .2rem;
}

.modal-footer {
display: table;
line-height: .8rem;
border-top: .01rem solid #d0cfcf;
text-align: center;
width: 100%;
}
.modal-default-button {
font-size: .28rem;
color: #159ff6;
display: table-cell;
vertical-align: middle;
cursor: pointer;
}
.modal-default-button:first-child{
border-right: 1px solid #d0cfcf;
}
.modal-default-button,button,.modal-mask,.popup{
outline: none;
cursor: pointer;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.popup{
width: 50%;
height: 1rem;
text-align: center;
line-height: 1rem;
color: #f0f;
background: #eee;
font-size: .3rem;
margin: .2rem auto;
}
</style>
</head>
<body>

<div class="modal-mask" οnclick="close_popUp('.modal-mask')"></div>
<div class="modal-container">
<div class="modal-head">温馨提示</div>
<div class="modal-body">
确认要提前结束答题吗？
</div>
<div class="modal-footer">
<a class="modal-default-button" οnclick="close_popUp('.modal-mask')">取消</a>
<a class="modal-default-button">确认</a>
</div>
</div>
<div style="height: 10rem; background: #ff0;width: 100%"></div>
<div class="popup" οnclick="pop_up('.modal-mask')">点我弹出遮罩层</div>
<div style="height: 10rem; background: #f0f;width: 100%"></div>
</body>
<script src="js/jquery.min.js"></script>
<script>
document.documentElement.style.fontSize=100/750*document.documentElement.clientWidth+'px';
window.οnresize=function () {
document.documentElement.style.fontSize=100/750*document.documentElement.clientWidth+'px';
};
function pop_up(obj){
$('html,body').css('overflow','hidden');
$(obj).css({'visibility':'visible','opacity':1});
$('.modal-container').css({'visibility':'visible','opacity':1});
}
function close_popUp(obj){
$('html,body').css('overflow','visible');
$(obj).css({'visibility':'hidden','opacity':0});
$('.modal-container').css({'visibility':'hidden','opacity':0});
}
</script>

</html>

玉林君

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery遮罩层禁止底部内容滑动！！！大坑~

弹框遮罩层*{padding: 0;margin: 0;}html,body{height: 100%;;}.modal-mask{position: fixed;z-index: 9998;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(0
复制链接

扫一扫