<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>弹层</title>
<style>
/* 弹层 */
.get-mask {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
z-index: 99;
}
.get-mask-hidden {
overflow-y: hidden !important;
padding-right: 15px;
}
.card {
display: flex;
flex-direction: column;
position: relative;
top: 30%;
left: 50%;
transform: translateX(-50%);
padding-top: 39px;
padding-left: 29px;
width: 519px;
height: 250px;
background: linear-gradient(0deg, #5458e0 0%, #7578f0 100%);
border-radius: 4px;
z-index: 999;
}
.closeImg {
position: absolute;
top: -68px;
right: -60px;
cursor: pointer;
}
</style>
</head>
<body>
<button class="cal-btn">btn</button>
<div class="get-mask">
<div class="card">
<img
class="closeImg"
src="http://file.cc/ui/lgw-school/cn/images/finance/act_pup_close.png"
alt=""
/>
1
</div>
</div>
<script
crossorigin="anonymous"
integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ=="
src="https://lib.baomitu.com/jquery/3.6.0/jquery.min.js"
></script>
<script>
$(".cal-btn").click(function () {
$("html,body").animate(
{
scrollTop: "0",
},
100
);
$(".get-mask").show();
$("body").addClass("get-mask-hidden");
});
$(".closeImg").click(function (e) {
e.stopPropagation();
$("body").removeClass("get-mask-hidden");
$(".get-mask").hide();
});
</script>
</body>
</html>
jquery手写遮罩层
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
推荐阅读更多精彩内容
- 链接：https://pan.baidu.com/s/1jGxxE1f1DeKbEl5oSyFMXQ密码：p46w...
