基于jquery的loading 加载提示效果实现代

loading 加载提示 ······ 透明遮罩 居中

1. body{
   
2. margin: 0;
   
3. font-size: 12px;
   
4. line-height: 100%;
   
5. font-family: Arial, sans-serif;
   
6. }
   
7. .background {
   
8. display: block;
   
9. width: 100%;
   
10. height: 100%;
    
11. opacity: 0.4;
    
12. filter: alpha(opacity=40);
    
13. background:while;
    
14. position: absolute;
    
15. top: 0;
    
16. left: 0;
    
17. z-index: 2000;
    
18. }
    
19. .progressBar {
    
20. border: solid 2px #86A5AD;
    
21. background: white url(progressBar_m.gif) no-repeat 10px 10px;
    
22. }
    
23. .progressBar {
    
24. display: block;
    
25. width: 148px;
    
26. height: 28px;
    
27. position: fixed;
    
28. top: 50%;
    
29. left: 50%;
    
30. margin-left: -74px;
    
31. margin-top: -14px;
    
32. padding: 10px 10px 10px 50px;
    
33. text-align: left;
    
34. line-height: 27px;
    
35. font-weight: bold;
    
36. position: absolute;
    
37. z-index: 2001;
    
38. }
    
39. 
    
40. 
    
41. 数据加载中，请稍等...
    
42. 
    
43. var ajaxbg = $("#background,#progressBar");
    
44. ajaxbg.hide();
    
45. $(document).ajaxStart(function () {
    
46. ajaxbg.show();
    
47. }).ajaxStop(function () {
    
48. ajaxbg.hide();
    
49. });

复制代码

作者：曾祥展