问题解决：fakeLoader无法实现点击button然后在弹出加载动画

查看css文件后发现：#

1 .fakeLoader {
2     position:fixed;
3     width:100%;
4     height:100%;
5     left:0;
6     top:0;
7     z-index:9999999999
8 }

直接提前设置了个全页面的覆盖层，所以button是不可点击的，真的是太坑了，一上来就设置一个透明的覆盖层，#

解决办法：#

动态加载css文件，就可以解决这个问题了#

案例运行代码：#

复制代码
 1 <!DOCTYPE html>
 2     <head>
 3         <meta charset="utf-8">
 4         <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 5         <title>DEMO4</title>
 6 
 7     </head>
 8     <body>          
 9         <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
10         <script src="js/fakeLoader.min.js"></script>
11         <script>
12            $(document).ready(function(){
13          $("button[class='btn btn-primary']").click(function(){
14          $("<link>")
15         .attr({ rel: "stylesheet",
16         type: "text/css",
17         href: "css/fakeLoader.min.css"
18         })
19         .appendTo("head");
20              $.fakeLoader({
21                     timeToHide:12000,
22                     bgColor:"#34495e",
23                     spinner:"spinner3"
24                 });
25             });               
26             });
27         </script>
28         <div class="fakeLoader"></div>
29 <button class="btn btn-primary">adf </button>
30     </body>
31 </html>
复制代码

 ————————————————————————————————————————————————————————————————————————————————————

更改：2021_4_25#

全新更改包含form表单提交：#

 

复制代码
 1 <!DOCTYPE html>
 2     <head>
 3         <meta charset="utf-8">
 4         <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 5         <title>DEMO4</title>
 6 
 7     </head>
 8     <body>
 9         <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
10         <script src="js/fakeLoader.min.js"></script>
11         <script>
12         
13      $(document).ready(function(){
14          $("button[class='btn btn-primary']").click(function(){
15          $("<link>")
16         .attr({ rel: "stylesheet",
17         type: "text/css",
18         href: "css/fakeLoader.min.css"
19         })
20         .appendTo("head");
21              $.fakeLoader({
22                     timeToHide:12000,
23                     bgColor:"#34495e",
24                     spinner:"spinner3"
25                 });
26              $("form").submit();
27             });
28        });
29         </script>
30         <div class="fakeLoader"></div>
31 
32     <form action="#" method="post"   enctype="multipart/form-data">                            
33         <button class="btn btn-primary" type='button' ">adf </button>
34         </form>
35         
36       
37 
38     </body>
39     
40 </html>
复制代码

 

posted @   博二爷  阅读(57)  评论(0)  编辑  收藏  举报
编辑推荐：
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· C#/.NET/.NET Core技术前沿周刊 | 第 29 期（2025年3.1-3.9）
· 从HTTP原因短语缺失研究HTTP/2和HTTP/3的设计差异
点击右上角即可分享
微信分享提示
SQL AI 助手
CONTENTS
✕