自定义alert弹出框

项目中往往会有很多弹出框，比如修改密码成功之类需要给用户一个提示，如果使用浏览器自带的肯定不好看，因此自定义一个提示框是很有必要的，代码如下

css部分：

/*alert.css*/
.zbox-popup {position: fixed;z-index: 10000;top: 50%;left: 50%;display: none;overflow: hidden;width: 270px;-webkit-transition-property: -webkit-transform,opacity;transition-property: transform,opacity;-webkit-transform:perspective(1200px) translate3d(-50%,-50%,0) scale(1.2) ;transform:perspective(1200px) translate3d(-50%,-50%,0) scale(1.2);text-align: center;opacity: 0;color: #000;border-radius: 3px;z-index: 10000;-webkit-perspective: 1200px;-moz-perspective: 1200px;-ms-perspective: 1200px;-o-perspective: 1200px;perspective: 1200px;-webkit-transform-style: preserve-3d;-moz-transform-style: preserve-3d;-ms-transform-style: preserve-3d;-o-transform-style: preserve-3d;transform-style: preserve-3d;-webkit-font-smoothing: antialiased;}
.zbox-popup.zbox-popup-in {display: block;transition-property: all;-webkit-transition-duration: 400ms;transition-duration: 400ms;-webkit-transform:perspective(1200px) translate3d(-50%,-50%,0) scale(1) ;transform:perspective(1200px) translate3d(-50%,-50%,0) scale(1);opacity: 1;}
.zbox-popup-inner {position: relative;padding: 15px;border-radius: 3px 3px 0 0;background: rgba(255,255,255,.95);}
.zbox-popup-inner:after {position: absolute;z-index: 15;top: auto;right: auto;bottom: 0;left: 0;display: block;width: 100%;height: 1px;content: '';background-color: rgba(0,0,0,.2);}
.zbox-popup-title {font-size:16px;font-weight: 500;text-align: center;color: #4a4a4a;}
.zbox-popup-title+.zbox-popup-text {font-family: inherit;font-size: 16px;margin: 5px 0 0;color: #4a4a4a;line-height: 1.75;}
.zbox-popup-buttons {position: relative;display: -webkit-box;display: -webkit-flex;display: flex;height: 44px;-webkit-box-pack: center;-webkit-justify-content: center;justify-content: center;}
.zbox-popup-button {font-size: 14px;line-height: 44px;position: relative;display: block;overflow: hidden;box-sizing: border-box;width: 100%;height: 44px;padding: 0 5px;cursor: pointer;text-align: center;white-space: nowrap;text-overflow: ellipsis;color:#fd9e09;background: rgba(255,255,255,.95);-webkit-box-flex: 1;}
.zbox-popup-button:first-child:last-child {border-radius: 0 0 3px 3px;}
.zbox-popup-button.zbox-popup-button-bold {font-weight: 600;}
.zbox-popup-button:after {position: absolute;z-index: 15;top: 0;right: 0;bottom: auto;left: auto;display: block;width: 1px;height: 100%;content: '';background-color: rgba(0,0,0,.2);}
.zbox-popup-backdrop.zbox-active {
	opacity: 1;
}
.zbox-popup-backdrop {position: fixed;z-index: 998;top: 0;right: 0;bottom: 0;left: 0;opacity: 0;background: rgba(0,0,0,.4);}
.zbox-toast-container{position:fixed;z-index:9999;bottom:60px;width:100%;opacity:0;left: 0;}
.zbox-toast-container.zbox-active{opacity:1}
.zbox-toast-message{font-size:14px;width:270px;margin:5px auto;padding:5px;text-align:center;color:#000;border-radius:5px;background-color:#d8d8d8;}
.zbox-btn-outlined.zbox-btn-blue, .zbox-btn-outlined.zbox-btn-primary {color: #007aff;}
.zbox-btn-outlined {background-color: transparent;}
.zbox-btn-blue, .zbox-btn-primary, input[type=submit] {color: #fff;border: 1px solid #007aff;background-color: #007aff;}
.zbox-btn {display: block;width: 120px;margin: 10px auto;}
#zchange{ width:44px; height: 44px; display:block;margin: 0 auto; }

js部分

//alert弹出框
(function($,window,document,undefined){
    //默认参数
    var PARAMS;
    var DEFAULTPARAMS = { Title: "标题", Content: "",BtnL:"确定",BtnR:"取消" , FunL: new Object, FunR: new Object };
    $.DialogByZ = {
        //弹出提示框
        Alert: function (params) {
            Show(params,"Alert");
        },
        //弹出确认框
        Confirm: function (params) { Show(params,"Confirm"); },
        //自动显示弹框
        Autofade: function (params) { Show(params,"Autofade") },
        //关闭弹出框
        Close: function () {
            $(".zbox-popup,.zbox-popup-backdrop").remove();
        },
        //加载图形
        Loading:function(Url){
            loadBox(Url)
        }

    };
    //初始化参数
    function Init(params) {
        if (params != undefined && params != null) {
            PARAMS = $.extend({},DEFAULTPARAMS, params);
        }
    };
    function loadBox(Url){
        var url=Url;
        var dislogContainer=$('<div class="zbox-popup" style="display: block;"><img  id="zchange" src="'+url+'"></div>');
        var blackFilter=$('<div class="zbox-popup-backdrop" style="display: block;"></div>');
        setTimeout(function(){
            $(".zbox-popup").addClass('zbox-popup-in');
            $(".zbox-popup-backdrop").addClass('zbox-active');
        },30)
        //$("body").append(blackFilter);
        $("body").append(dislogContainer);
    }
    function Show(params, caller){
        Init(params);
        var dislogContainer;
        var dialogInner;
        var dialogBtn;
        var blackFilter=$('<div class="zbox-popup-backdrop" style="display: block;"></div>');
        if(caller=='Autofade'){
            dislogContainer=$('<div class="zbox-toast-container"><div class="zbox-toast-message">'
                +PARAMS.Content+'</div></div>');
            $("body").append(dislogContainer);
            setTimeout(function(){
                $(".zbox-toast-container").addClass('zbox-active');
            },30)
            setTimeout(function(){
                $(".zbox-toast-container").remove();
            },3000)
        }else{
            dislogContainer=$('<div class="zbox-popup" style="display: block;"></div>');
            dialogInner=$('<div class="zbox-popup-inner"><div class="zbox-popup-title">'+PARAMS.Title+'</div><div class="zbox-popup-text">'+PARAMS.Content+'</div></div>');
            dialogBtn=$('<div class="zbox-popup-buttons"><span class="zbox-popup-button" index="0">'+PARAMS.BtnL+'</span></div>');
            if(caller=='Confirm'){
                dialogBtn.append($('<span class="zbox-popup-button R" index="1">'+PARAMS.BtnR+'</span>'));
            }
            dislogContainer.append(dialogInner);
            dislogContainer.append(dialogBtn);
            setTimeout(function(){
                $(".zbox-popup").addClass('zbox-popup-in');
                $(".zbox-popup-backdrop").addClass('zbox-active');
            },10)
            $("body").append(blackFilter);
            $("body").append(dislogContainer);

            $(".zbox-popup-button").click(function(){
                var indexs=$(this).attr('index');
                if(indexs==0){
                    //左侧按钮
                    if($.isFunction(PARAMS.FunL)){
                        PARAMS.FunL();
                    }else{
                        $.DialogByZ.Close();
                    }
                }else{
                    //右侧按钮
                    if($.isFunction(PARAMS.FunR)){
                        PARAMS.FunR();
                    }else{
                        $.DialogByZ.Close();
                    }
                }
                return false;
            })

        }
        //
    }
})(jQuery,window,document);
function confirm(content,url){//确定
    $.DialogByZ.Confirm({Title: "", Content: content,FunL:Url,FunR:confirm_2})
    function Url(){
        location.href=url
    }
}
function confirm_2(){
    $.DialogByZ.Alert({Title: "", Content: "您选择再次考虑后决定",BtnL:"确定"})
}

window.url='http://baidu.com';
$('span').click(function(){
    var content='';
    var url='';
    confirm(content,url)
})