html遮罩功能

1.我是因为我的项目中，后端响应时间太长，我怕用户乱点，我就想做这个功能，但是对于前端暂时外行啊，

于是我沏好咖啡，给大哥点上烟，大哥深深吸了一口，吹了个圈，缓缓地说出了两个字：遮罩。

看他这表情，我都想揍他，算了谁让咱不知道呢。

2.打开百度，遮罩，胡乱点了几个博客，写的好乱，不想看，直至我点开了一个宝藏链接（你们想多了），小广告咋关不掉呢，这玩意他是不是遮罩呢，

灵感来了，图层z-index + 绝对定位 +背景透明度 ；这不就搞定了吗

3.代码来了，写好css样式，根据点击事件，添加class,响应完成再去掉class。我太聪明了

总代码：

复制代码
复制代码
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <style type="text/css">
        .zz{
            width: 2000px;
            height: 1000px;
            background-color: rgba(230, 230, 250, 0.5);
            position: absolute;
            top: 0;
            left: 0;
            z-index: 1;
        }
    </style>
</head>
<body>
    <div id="zz"></div>
    <button class="bt">点击</button>

   <script type="">
       $(".bt").click(function function_name(argument) {
           // 开启遮罩，等待响应结束
           $("#zz").addClass("zz")


           // 等待响应完成
           // $("#zz").removeClass("zz")
       })
   </script>
</body>
</html>
View Code
复制代码

 

复制代码

给你们看看效果图：

 

编辑
编辑推荐：
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
· 【译】Visual Studio 中新的强大生产力特性
· 【设计模式】告别冗长if-else语句：使用策略模式优化代码结构
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
历史上的今天：
2020-08-11 pymysql模块，python与MySQL之间的交互
点击右上角即可分享
微信分享提示
SQL AI 助手