zoukankan      html  css  js  c++  java
  • 纯css实现loading加载提示(全屏遮罩层)可扩展手机端



    /**************PC全屏遮罩层,loading加载提示效果**************/
    <!-- html部分 -->
    <div class='mask' style="position: fixed; top: 0; left: 0; z-index: 99998; 100%; height: 100%; display: none; opacity: 0.4; overflow:hidden;"></div>
    <!-- 提示层 -->
    <div class='board' style="position: fixed; top: 50%; left: 50%; 32px;height: 32px; z-index: 99999; display: none;">
    <div><img src="../../images/loading.gif" style=" 32px; height: 32px;"></div>
    <!--<div class='qrcode' style="margin-top:3%; 76%;margin-left:12%;text-align:center">请点击获取验证码</div>
    <div class="heart" style="margin-top:6%"><span style="text-align:center;background:#ED171F;display:block;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;  100%; height: 100%; display: none; background-color: #f2f2f2;opacity: 0.4; overflow:hidden;"></div>
    <!-- 提示层 -->
    <div class='board' style="position: fixed; top: 35%; left: 35%; 20%;height: 35%; background: #fff; z-index: 99999; display: none;">
    <div style="text-align: center; margin-top: 25%"><img src="../../images/loading.gif" style=" 32px; height: 32px;"></div>
    <div class='qrcode' style="margin-top:3%; 76%;margin-left:12%;text-align:center">请点击获取验证码</div>
    <div class="heart" style="margin-top:6%"><span style="text-align:center;background:#ED171F;display:block;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();
    /**************注**************/

     根据实际情况修改提示层定位

  • 相关阅读:
    2021.1.28 个人rating赛补题报告
    2021.1.23 个人rating赛补题报告
    2021.1.23 个人rating赛补题报告
    2020.12.14 个人训练赛补题报告
    2020.11.28 2020团体程序设计天梯赛补题报告
    2020.12.3 Codeforces Beta Round #73(Div2)补题报告
    Xhorse VVDI Prog V5.0.6 is Ready for BCM2 Adapter
    Program 2021 Ford Bronco All Keys Lost using VVDI Key Tool Plus
    Xhorse VVDI Prog V5.0.4 Software Update in July 2021
    How to use Xhorse VVDI2 to Exchange BMW FEM/BDC Module?
  • 原文地址:https://www.cnblogs.com/juzijiang/p/11287464.html
Copyright © 2011-2022 走看看