1.效果图如下：该效果完全手写css，不引用外部框架css

image.png

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中的