全屏遮罩和弹出窗

/*全屏遮罩
* 使用方法：
* 显示：TC.shadow.show();
* 隐藏：TC.shadow.hide();
* */

;(function(){
    function addShadow( obj ) {
        if(typeof obj !== "object"){
            return false;
        }
        obj.show();
        var $shadow = $( '#shadow' );
        if ( !$shadow.length ) {
            $shadow = $( '<section id="shadow" style="opacity: .8; width: 100%;height: 100%;position: fixed;top: 0;left: 0;" class="z-act-pop"></section>' );
            $("body").append($shadow);
        } else {
            $shadow.css({
                opacity:0.8,
                display:"block"
            });
        }
        var docH = $( document ).height(), winH = $( window ).height(), h = Math.max( docH, winH );
        $shadow.height( h ).off( "click" ).on( "click", function( e ) {
            e.preventDefault();
            e.stopPropagation();
            $shadow.fadeOut("fast");
            obj.hide();
            // 避免点击穿透到后面的元素
            return false;
        } );
        return $shadow;
    }
    TC.shadow = TC.shadow || {
            show : addShadow,
            hide : function() {
                $( '#shadow' ).fadeOut("fast");
                return false;
            }
        };
})();
/*
 * 信息提示浮层
 * 使用方法：
 * TC.shadow.show({
 show:function(){
 TC.mess.show({
 info:"您本次的提现金额为：100元确认申请提现吗？",
 url:"#"
 });
 },
 hide:function(){
 TC.mess.hide();
 }
 });
 * info：弹窗主体的内容，url：点击确定时的链接，btnInfo：将确定按钮的文字换成其他文字
 * 当仅传入info时，窗体只显示一个确定按钮。
 * 点击确定、取消按钮时，函数返回true
 */
;(function(){
    //弹窗信息提示
    //info,url,btnInfo
    function messShow(obj){
        messHtml();//给页面添加弹出层的html
        var docH = $( document ).height(), winH = $( window ).height(), hgh = Math.max( docH, winH );//获取窗口可视范围的高度
        $("body").css("height",hgh+"px");
        $("body").css("overflow","hidden");
        if(obj.info){//弹出框的主体信息，当其为空时显示默认信息，不为空时赋值
            $(".mess-content").text(obj.info);
        }
        if(obj.url === undefined || obj.url==""){//当url为空的时候，仅显示确定按钮
            onlyShowSure();//仅显示确定一个按钮
        }else{
            $(".mess-btn .sure a").attr("href",obj.url);//当url存在的时候为确定按钮赋值
        }
        if(obj.btnInfo === "" || obj.btnInfo){//btnInfo为确定按钮传入的值。
            if(obj.btnInfo == ""){
                onlyShowSure();//仅显示确定一个按钮
            }else{
                $(".mess-btn .sure a").text(obj.btnInfo);//为确定按钮赋值
            }
        }
    }
    //给页面添加弹出层的html
    function messHtml(){
        var $messBox = $('#mess-box');
        var $html =  '<div id="mess-box">' +
                        '<div class="mess-content"></div>' +
                        '<div class="mess-btn">' +
                        '<ul>' +
                        '<li class="cancel"><a href="javaScript:;">取消</a><span>|</span></li>' +
                        '<li class="sure"><a href="javaScript:;">确定</a></li>' +
                        '</ul>' +
                        '</div>' +
                    '</div>';
        if( !$messBox.length ){
            $("body").append( $html );
        }else{            $("#mess-box").css("display","block");        }        $(".mess-btn .cancel").off("click",boxHide).on("click",boxHide);    }    //仅显示确定一个按钮    function onlyShowSure(){        $(".mess-btn .sure").off("click",boxHide).on("click",boxHide);        $(".mess-btn li.sure").css("width","100%");        $(".mess-btn li.cancel").hide();        $(".mess-btn .sure span").hide();    }    //隐藏弹出框    function boxHide(){        TC.shadow.hide();        $("#mess-box").hide();        $("body").removeAttr("style");        return true;    }    TC.mess = TC.mess || {        show:messShow,        hide:boxHide    }})();

/*弹窗提示部分开始*/

#mess-box{
    width: 200px;
    margin:200px auto 0;
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    text-align:center;
    background: #fff;
    overflow: hidden;
    z-index:999;
}
.mess-title{

}
.mess-content{
    color:#928F8A;
    line-height: 31px;
    margin-top: 10px;
    margin-bottom: 10px;
}
.mess-btn{
    background:#ffda44;
    float: left;
    width: 100%;
    height: 25px;
    line-height: 25px;
}
.mess-btn ul li{
    width:50%;
    float:left;
    color:#000;
    cursor: pointer;

}
.mess-btn ul li a:link,.mess-btn ul li a:visited,.mess-btn ul li a:hover,.mess-btn ul li a:active{
    color:#000;
    display: block;
    float: left;
    width: 96%;
}
.mess-btn ul li span{
   float:right;
}

/*弹窗提示部分结束*/