html遮罩功能

简介: 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>

给你们看看效果图:

1727339157715(1).png

相关文章
|
4月前
|
Web App开发
在 HTML 中禁用 Chrome 浏览器的 Google 翻译功能
在 html 标签中添加 translate=“no” 属性,浏览器将不会翻译整个页面。
273 0
WK
|
1天前
|
存储 移动开发 API
哪些功能是HTML5的新增功能
HTML5作为HTML的最新版本,引入了许多新的功能和特性,这些功能极大地丰富了网页的表现力和交互性。以下是HTML5的一些新增功能:
WK
9 2
|
2天前
|
移动开发 前端开发 JavaScript
Twaver-HTML5基础学习(3)基本数据元素(Data)其他功能函数以及组Group
本文介绍了Twaver HTML5中Data类的其他功能函数,如获取和操作子网元的方法,以及组(Group)的概念和使用。文章通过示例代码展示了如何在React组件中创建组、添加图元到组中,并通过toChildren函数获取满足特定条件的图元。
8 0
Twaver-HTML5基础学习(3)基本数据元素(Data)其他功能函数以及组Group
|
4月前
|
Java 测试技术 数据库
基于SpringBoot+HTML实现登录注册功能模块
基于SpringBoot+HTML实现登录注册功能模块
|
2月前
|
自然语言处理 开发者 Python
Markdown 是一种轻量级标记语言,它允许人们使用易读易写的纯文本格式编写文档,然后转换成格式丰富的 HTML 内容。Markdown 的语法简洁明了、学习容易,而且功能比纯文本更强。
Markdown 是一种轻量级标记语言,它允许人们使用易读易写的纯文本格式编写文档,然后转换成格式丰富的 HTML 内容。Markdown 的语法简洁明了、学习容易,而且功能比纯文本更强。
|
2月前
HTML【详解】超链接 a 标签的四大功能(页面跳转、页内滚动【锚点】、页面刷新、文件下载)
HTML【详解】超链接 a 标签的四大功能(页面跳转、页内滚动【锚点】、页面刷新、文件下载)
64 0
|
3月前
|
前端开发 JavaScript 容器
技术经验解读:个人练习:使用HTML+CSS3制作图片轮播功能(不使用JavaScript)
技术经验解读:个人练习:使用HTML+CSS3制作图片轮播功能(不使用JavaScript)
50 0
|
4月前
|
存储 JavaScript 前端开发
笔.COOL,一个功能完备、使用便捷的在线HTML/CSS/JS以及Vue编辑器和作品分享平台
笔.COOL是一个新兴的在线 HTML/CSS/JS 及 Vue 编辑器,提供实时预览和云端存储功能。用户可以随时随地编写和保存代码,同时分享作品给他人预览和学习。它也是一个实用的 BUG 复现工具,支持嵌入编辑器到博客,促进代码交流。社区活跃,适合开发者展示作品、获取灵感和学习。
|
3月前
|
前端开发 JavaScript
HTML的a标签如何做返回顶部的功能
HTML的a标签如何做返回顶部的功能
121 0
|
4月前
|
JavaScript 前端开发
多功能成语查询工具HTML源码
采用本地HTML,JavaScript,js代码编写,自适应端,源码全部开源可二开优化! 功能包含;成语接龙查询、以某个字开头的成语查询、包含某字的成语查询、 第二个字是某字的成语查询上传源码解压缩即可访问,支持上传二级目录访问, 或者是浏览器直接打开html本地访问
57 0