html遮罩功能
1.我是因为我的项目中,后端响应时间太长,我怕用户乱点,我就想做这个功能,但是对于前端暂时外行啊,
于是我沏好咖啡,给大哥点上烟,大哥深深吸了一口,吹了个圈,缓缓地说出了两个字:遮罩。
看他这表情,我都想揍他,算了谁让咱不知道呢。
2.打开百度,遮罩,胡乱点了几个博客,写的好乱,不想看,直至我点开了一个宝藏链接(你们想多了),小广告咋关不掉呢,这玩意他是不是遮罩呢,
灵感来了,图层z-index + 绝对定位 +背景透明度 ;这不就搞定了吗
3.代码来了,写好css样式,根据点击事件,添加class,响应完成再去掉class。我太聪明了
总代码:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!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>
给你们看看效果图:
-----------------------------------------------------------------------------------------------------------------------------------------