index.html 1.7 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title></title>
  6. <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
  7. <link rel="stylesheet" href="load.css" media="all">
  8. <script src="load-min.js" charset="utf-8"></script>
  9. <style>
  10. button{
  11. outline: none;
  12. padding: 5px 15px;
  13. border: 1px solid #eee;
  14. background-color: #FFFFFF;
  15. border-radius: 5px;
  16. font-size: 12px;
  17. }
  18. button:hover{
  19. cursor: pointer;
  20. }
  21. .test_mask{
  22. width: 800px;
  23. height: 300px;
  24. border: 1px solid #BCE8F1;
  25. }
  26. </style>
  27. </head>
  28. <body>
  29. <button onclick="mask_fullscreen()">数据加载-全屏(1s自动关闭)</button>
  30. <button onclick="mask_element()">数据加载-指定元素(3s自动关闭)</button>
  31. <button onclick="mask_element_continuious()">数据加载-指定元素(不自动关闭)</button>
  32. <button onclick="mask_close()">关闭指定元素加载层</button>
  33. <button onclick="mask_close_all()">关闭所有加载层</button>
  34. <hr />
  35. <div>自动关闭:</div>
  36. <div id = "test_mask" class="test_mask">
  37. </div>
  38. <br>
  39. <div>不自动关闭:</div>
  40. <div id = "test_mask_2" class="test_mask">
  41. </div>
  42. </body>
  43. <script type="text/javascript">
  44. //加载层-全屏
  45. function mask_fullscreen(){
  46. $.mask_fullscreen(1000);
  47. }
  48. //加载层-指定元素
  49. function mask_element(){
  50. $.mask_element('#test_mask', 3000);
  51. }
  52. //加载层-指定元素:不自动关闭
  53. function mask_element_continuious(){
  54. $.mask_element('#test_mask_2');
  55. }
  56. //关闭指定元素加载层
  57. function mask_close(){
  58. $.mask_close('#test_mask_2');
  59. }
  60. //关闭所有加载层
  61. function mask_close_all(){
  62. $.mask_close_all();
  63. }
  64. </script>
  65. </html>