html5自定义遮罩的实现代码分享

.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;
}

(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);