H5遮罩层+弹窗详细
遮罩层 弹窗全套实例,包括jq点击事件及禁止屏幕滑动
适合新手小白学习理解
HTML代码
<!-- 遮罩层 -->
<div class="maskLayer">
<!-- 弹窗 -->
<div class="popup">
<div class="btn-close">关闭弹窗</div>
</div>
</div>
<!-- 内容 -->
<div class="content">
<div class="item1">
<div class="btn-click">点击出现弹窗</div>
</div>
<div class="item2"></div>
<div class="item3"></div>
<div class="item4"></div>
</div>
CSS代码
注:遮罩层的定位必须用fixed才会始终撑满当前页面,absolute是相对于body的定位,遮罩层不会铺满整个页面
.maskLayer{
width: 100%;
height: 100%;
background-color: rgba(0,0,0,.5);
position: fixed;
top: 0;
left: 0;
z-index: 99;
display: none;
}
.popup{
width: 80%;
height: 30rem;
background-color: #FFFFFF;
z-index: 999;
position: absolute;
left: 50%;
top: 50%;
margin-top: -15rem;
margin-left: -40%;
}
.item1{
width: 100%;
height: 30rem;
background-color: #8A78FE;
}
.btn-click{
width: 50%;
padding: 1rem;
font-size: 1.5rem;
color: #000000;
text-align: center;
background-color: #FFEBCD;
}
.item2{
width: 100%;
height: 30rem;
background-color: #FFEBCD;
}
.item3{
width: 100%;
height: 30rem;
background-color: #FF5317;
}
.item4{
width: 100%;
height: 30rem;
background-color: #199BFF;
}
.btn-close{
width: 15rem;
height: 5rem;
line-height: 5rem;
font-size: 1.5rem;
color: #000000;
text-align: center;
background-color: #8A78FE;
}
JS代码
$(document).ready(function(){
$(".btn-click").on("click",function(){
// 点击出现弹窗事件
$(".maskLayer,.popup").show();
// 禁止页面滑动
$("body").css("overflow","hidden");
})
$(".btn-close,.maskLayer").on("click",function(){
// 点击关闭弹窗按钮及遮罩层关闭弹窗事件
$(".maskLayer,.popup").hide();
// 解除禁止滑动
$("body").css("overflow","");
})
});
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhiajcii
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
微信运动停用后别人还能看到步数吗
PHP中文网 07-22 -
excel打印预览压线压字怎么办
PHP中文网 06-22