html5 自定義遮罩

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(../../p_w_picpaths/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);