html5自定義遮罩的實現(xiàn)代碼分享

ys_loading.css

.ys-loading{      position:fixed;      top:0;      bottom:0;      left:0;      right:0;      z-index: 9999;  }     .ys-loading em{      position:absolute;      left:0;      right:0;      top:0;      bottom:0;      width:44px;      height:44px;      margin:auto;      border-radius: 22px;      opacity: 0.3;      overflow: hidden;  }     .ys-loading em:before{      content:"";      display:block;      width:46px;      height:46px;      background:url(../../images/common/ajax-loader.gif) no-repeat center center;      background-size:contain;      margin-top:-1px;      margin-left:-1px;  }

ys_loading.js

(function($){         var container = null;         var html =  "<div class='ys-loading'><em></em></div>";         function render(){          container = $(html).appendTo("body");      }      var initialized = false;      function init(){          if(initialized){              return;          }          initialized = true;          render();      }         var LoadingWidget = {          showLoading:function(){              init();              container.show();          },          hideLoading:function(){              container.hide();          }      };         window.LoadingWidget = LoadingWidget;  })(jQuery);