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 = "
"; 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);