1.效果图如下:该效果完全手写css,不引用外部框架css
2.html代码:
<!-- 底部透明灰色层 -->
<div class='mask' style="position:fixed;top:0;left:0;z-index:998;width:100%;height:100%;display:none;background-color:#000;opacity:0.5;overflow:hidden;"></div>
<!-- 提示层 -->
<div class='board' style="position:fixed;border-radius:12px;background-color:#fff;top:25%;left:7.2%;width:85.6%;height:170px;z-index:999;display:none;">
<div class="logo"><span style="display:block;color:#000;font-size:16px;font-weight:700;text-align:center;padding-top:5.4%;margin: 0 auto;">提示</span></div>
<div class='qrcode' style="margin-top:3%;width: 76%;margin-left:12%;text-align:center">请点击获取验证码</div>
<div class="heart" style="margin-top:6%"><span style="text-align:center;background:#ED171F;display:block;width:30.4%;margin:0 auto;font-size:14px;color:#fff;font-weight:700;height:36px;border-radius:12px;line-height:36px;border:1px solid red" id="alertSure">确定</span></div>
</div>
控制显示隐藏js代码:
$('.mask').css('display','block');
$('.board').css('display','block');
与
$('.mask').css('display','none');
$('.board').css('display','none');
最后:我把css样式直接写在html中显得比较乱,因为某些原因所以我才写在html中的
感兴趣的小伙伴可以扫码关注下公众号哦,公众号会分享高质量的技术文章哦