純css實現loading加載提示（全屏遮罩層）可擴展手機端

/**************PC全屏遮罩層，loading加載提示效果**************/

<!-- html部分 -->
<div class='mask' style="position: fixed; top: 0; left: 0; z-index: 99998; width: 100%; height: 100%; display: none; opacity: 0.4; overflow:hidden;"></div>
<!-- 提示層 -->
<div class='board' style="position: fixed; top: 50%; left: 50%; width: 32px;height: 32px; z-index: 99999; display: none;">
    <div><img src="../../images/loading.gif" style="width: 32px; height: 32px;"></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>

 

/**************手機端全屏遮罩層，loading加載提示效果**************/

<!-- html部分 -->

<div class='mask' style="position: fixed; top: 0; left: 0; z-index: 99998; width: 100%; height: 100%; display: none; background-color: #f2f2f2;opacity: 0.4; overflow:hidden;"></div>
<!-- 提示層 -->
<div class='board' style="position: fixed; top: 35%; left: 35%; width: 20%;height: 35%; background: #fff; z-index: 99999; display: none;">
    <div style="text-align: center; margin-top: 25%"><img src="../../images/loading.gif" style="width: 32px; height: 32px;"></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>

使用方法：
顯示：

$('.mask').show();
$('.board').show();

隱藏：

$('.mask').hide();
$('.board').hide();

/**************注**************/

 根據實際狀況修改提示層定位