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中的
感兴趣的小伙伴可以扫码关注下公众号哦，公众号会分享高质量的技术文章哦
