输入卡号密码弹层以及遮罩，点击遮罩取消弹层实现案例

2022年12月1日 0条评论

输入卡号密码弹层以及遮罩，点击遮罩取消弹层实现案例

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta id="viewport" name="viewport" content="width=device-width,minimum-scale=1,maximum-scale=1">
<script type='text/javascript' src='https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js'></script>
<title>礼物详情</title>
</head>
<style>
* {
margin: 0;
padding: 0;
}
.zhe {
position: absolute;
z-index: 99;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: none;
transition: background 350ms cubic-bezier(.165, .84, .44, 1);
background: rgba(0, 0, 0, .4);
box-shadow: -4px 0 4px rgb(0 0 0 / 50%), 4px 0 4px rgb(0 0 0 / 50%);
-webkit-tap-highlight-color: transparent;
}
.input_pwd {
width: 95%;
height: 337px;
position: fixed;
top: 30%;
display: none;
background: white;
z-index: 100;
border-radius: 10px;
}
.span_i {
padding: 0;
margin-top: 10px;
border-bottom: 1px solid gainsboro;
height: 40px;
line-height: 40px;
white-space: nowrap;
overflow: hidden;

}
.span_i input {
height: 100%;
width: 100%;
border: none;
}
.btn_scard {
width: 100%;
margin: 0 auto;
text-align: center;
}
.btn_scard button {
width: 96%;
height: 41px;
margin: 30px 0;
background: #35bf4a;
border: none;
color: white;
}
</style>

<body style="width: 100%;height: 100%;background: #F6F6F6;">


<section class="commodity">
<div class="core">
我是内容啊<br /> 我是内容啊<br /> 我是内容啊<br /> 我是内容啊<br /> 我是内容啊<br /> 我是内容啊<br /> 我是内容啊<br />
我是内容啊<br /> 我是内容啊<br /> 我是内容啊<br /> 我是内容啊<br /> 我是内容啊<br /> 我是内容啊<br /> 我是内容啊<br />
我是内容啊<br /> 我是内容啊<br /> 我是内容啊<br /> 我是内容啊<br /> 我是内容啊<br /> 我是内容啊<br /> 我是内容啊<br />
我是内容啊<br /> 我是内容啊<br /> 我是内容啊<br /> 我是内容啊<br /> 我是内容啊<br /> 我是内容啊<br /> 我是内容啊<br />
我是内容啊<br /> 我是内容啊<br /> 我是内容啊<br /> 我是内容啊<br /> 我是内容啊<br /> 我是内容啊<br /> 我是内容啊<br />
我是内容啊<br /> 我是内容啊<br /> 我是内容啊<br /> 我是内容啊<br /> 我是内容啊<br /> 我是内容啊<br /> 我是内容啊<br />
我是内容啊<br /> 我是内容啊<br /> 我是内容啊<br /> 我是内容啊<br /> 我是内容啊<br /> 我是内容啊<br /> 我是内容啊<br />
我是内容啊<br /> 我是内容啊<br /> 我是内容啊<br /> 我是内容啊<br /> 我是内容啊<br /> 我是内容啊<br /> 我是内容啊<br />
我是内容啊<br /> 我是内容啊<br /> 我是内容啊<br /> 我是内容啊<br /> 我是内容啊<br /> 我是内容啊<br /> 我是内容啊<br />
我是内容啊<br /> 我是内容啊<br /> 我是内容啊<br /> 我是内容啊<br /> 我是内容啊<br /> 我是内容啊<br /> 我是内容啊<br />
我是内容啊<br /> 我是内容啊<br /> 我是内容啊<br /> 我是内容啊<br /> 我是内容啊<br /> 我是内容啊<br /> 我是内容啊<br />

</div>
</section>

<div class="zhe" style="width: 100vw;height:100vh;position:fixed;"></div>

<div style="width:100%;display:flex;flex-direction:row;justify-content:center;z-index:9999;">
<div class="input_pwd">

<div style="margin-top:40px"></div>
<div class="all_i" style="margin:0 auto;width:90%">
<div class="span_i">
<span>卡号:<input type="text" name="s_cardnum" value="cs1001"></span>
</div>
<div class="span_i">
<span>密码:<input type="password" name="s_cardpwd" value="" placeholder="请输入密码"></span>
</div>
<div class="btn_scard">
<button class="sub_sc">提交</button>
</div>
</div>
</div>
</div>

</body>

</html>

<script>
$(".zhe").show();
$(".input_pwd").show();
$(".zhe").click(function () {
$(".zhe").hide();
$(".input_pwd").hide();
})
</script>