问题解决: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>
原文地址:https://www.cnblogs.com/smartisn/p/14701376.html