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
给你们看看效果图:
来源: http://www.bubuko.com/infodetail-3808400.html