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');
控制隐藏js代码:
$('.mask').css('display','none');
$('.board').css('display','none');