JAVASCRIPT代码和样式

//遮罩效果
function loadtip ($txt) {
    var div = document.createElement("div");
    var divattr = document.createAttribute("id");
    divattr.value = "wrap";
    div.setAttributeNode(divattr);
    document.getElementsByTagName("body").item(0).appendChild(div);
    var _wraper = $('#wrap');//内容容器
    return {
        alert: function ($txt) {
            /*创建DOM结构*/
            _wraper.append('<div class="myMask" id="myMask"></div> ');
            $('#myMask').html('<div class="loader">Loading...</div>');
            /*绑定功能*/
            $('#myMask').fadeIn();
        },
    }
}

//遮罩隐藏
function hideLayer(){
    $('#wrap').remove()
}
/*模态窗口 begin*/
.myMask{
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.15);
    background: rgb(0,0,0)\9;
    filter:alpha(opacity=0.4)\9;
    top: 0;
    display: none;
    margin:0 auto;
    /*margin-left: -259px;*/
}
.hide{
    display: none;
}

.loader {
    position: absolute;
    top: 40%;
    left: 0;
    right: 0;
    z-index: 10000;
    font-size: 20px;
    margin: 0 auto;
    width: 1em;
    height: 1em;
    border-radius: 50%;
    text-indent: -9999em;
    /*box-shadow: 0 -3em 0 .2em #3CB0C1, 2em -2em 0 .2em #eeeeee, 3em 0 0 .2em #ddd, 2em 2em 0 .2em #ccc, 0 3em 0 .2em #bbb, -2em 2em 0 .2em #aaa, -3em 0 0 .2em #999, -2em -2em 0 .2em #888;*/
    -webkit-animation: load-effect 1s infinite linear;
    animation: load-effect 1s infinite linear;
}
@-webkit-keyframes load-effect {
    0% {
        box-shadow: -3em 2em 0 .5em #FFF, 0 2em 0 0 #FFF, 3em 2em 0 -.5em #FFF;
    }
    25% {
        box-shadow: -3em 2em 0 0 #FFF, 0 2em 0 -.5em #FFF, 3em 2em 0 0 #FFF;
    }
    50% {
        box-shadow: -3em 2em 0 -0.5em #FFF, 0 2em 0 0 #FFF, 3em 2em 0 .5em #FFF;
    }
    75% {
        box-shadow: -3em 2em 0 0 #FFF, 0 2em 0 .5em #FFF, 3em 2em 0 0 #FFF;
    }
    100% {
        box-shadow: -3em 2em 0 .5em #FFF, 0 2em 0 0 #FFF, 3em 2em 0 -.5em #FFF;
    }
}
@keyframes load-effect {
    0% {
        box-shadow: -3em 2em 0 .5em #FFF, 0 2em 0 0 #FFF, 3em 2em 0 -.5em #FFF;
    }
    25% {
        box-shadow: -3em 2em 0 0 #FFF, 0 2em 0 -.5em #FFF, 3em 2em 0 0 #FFF;
    }
    50% {
        box-shadow: -3em 2em 0 -0.5em #FFF, 0 2em 0 0 #FFF, 3em 2em 0 .5em #FFF;
    }
    75% {
        box-shadow: -3em 2em 0 0 #FFF, 0 2em 0 .5em #FFF, 3em 2em 0 0 #FFF;
    }
    100% {
        box-shadow: -3em 2em 0 .5em #FFF, 0 2em 0 0 #FFF, 3em 2em 0 -.5em #FFF;
    }
}
function getAjaxFunction(url,callback,param){
    param = param || {};
    $.ajax({
        type: 'POST',
        url: url,
        data: param,
        cache: false,
        async: false,
        success: function (data) {
            hideLayer();
            if (data) {
                callback(data);
            }
        },
        error: function (val) {
            hideLayer();
            // alertErrorMsg("访问服务器失败！");
        }
    });
};