新版公共弹出层

var SETTINGS = {
    width : 'auto',
    title:'请添加标题',
    content:'请添加文本内容！',
    mask : true,
    timeOut:'0',
    dragable:false,
    dir : 'center',
    opacity : 0.5,
    cancelBtn:true
}
var Zdialog = function(opt){

    if(this instanceof Zdialog){
        this.settings = {};
        extend(this.settings,SETTINGS);
        this.settings.closeIcon = true;
        this.settings.className = 'zdialog am-modal-dialog';
        this.settings.height = '';
        if(typeof opt.done == 'function'){
            this.settings.done = opt.done;
        }
        if(opt.buttons){
            this.settings.buttons = [{
                text : '确定'
            },{
                text : '取消'
            }]
        }else{
            this.settings.buttons = [];
        }
    }else{
        return new Zdialog(opt);
    }
    //初始化各参数
    this.settings.className ? opt.className = 'containter ' + this.settings.className + ' ' + (opt.className ? opt.className : '') : 'containter';
    this.init(opt);
    if(this.settings.dragable === true){
        new Drag('containter').init();
    }
    return this;
};

Zdialog.prototype.init = function (opt){
    extend(this.settings,opt);
    this.create();
    
}

Zdialog.prototype.create = function(){
    var self = this;
    var oContainter = null;
    this.containter = oContainter = document.createElement('div');
    oContainter.className = this.settings.className || 'containter';
    oContainter.id = this.settings.id || 'containter';

    if(this.settings.closeIcon){
        this.closeIcon = '<a href="javascript:;" id="diaClose" class="diaClose">X</a>';
    }else{
        this.closeIcon = '';
    }

    if(this.settings.mask){
        var omask = null;
        omask = document.createElement('div');
        omask.className = 'mask';
        omask.id = 'mask';
        document.body.appendChild(omask);
    }
    if(this.settings.title!=false){

        this.header = '<div class="diaHeader am-text-center am-modal-hd" id="diaHeader">'+this.settings.title+this.closeIcon+'</div>';
    }else{
        this.header = '';
    }


    this.content = '<div class="diaContent am-modal-bd" id="diaContent">'+this.settings.content+'</div>';

    var buttons = this.settings.buttons;
    var bntstr = '';

    for (var i = 0; i < buttons.length; i++) {
        bntstr += '<span class="'+ (buttons[i].className || 'comfirmBtn am-modal-btn') +'" >'+buttons[i].text+'</span>';
    };

    //footer buttons init
    if(this.settings.buttons!=false){
        this.footer = '<div class="diaFooter am-modal-footer" id="diaFooter">'+bntstr+'</div>';
    }else{
        this.footer = '';
    }


    //template add to containter
    oContainter.innerHTML = this.header+this.content + this.footer;

    //insert template oContainter to body
    document.body.appendChild(oContainter);
    if(typeof this.settings.done == 'function'){        
        this.settings.done();   
    }

    this.bindfn(oContainter,buttons);

    //set containter  css style
    this.setStyle(oContainter,omask);
}

Zdialog.prototype.bindfn = function (oContainter,buttons) {
    var self = this;
    var oheader = oContainter.firstElementChild || oContainter.firstChild ;

    if(oheader.className=="diaHeader"){
        //the closeIcon action
        var oclose = oheader.getElementsByTagName('a')[0];
    }else{
        var oclose = document.getElementById('diaClose');
    }

    if(oclose){
        oclose.onclick = function(){
            setTimeout(function(){
                self.close();
            },self.settings.timeOut);
        };
    }

    //add setting buttons fns
    if(this.footer){

        var ofooter = oContainter.lastElementChild || oContainter.lastChild ;
        this.abtns = abtns = ofooter.getElementsByTagName('span');

        if(this.constructor == Zconfirm){
            var self = this;
            abtns[abtns.length-1].onclick = function(){
                if(typeof self.doConfirm == "function" || typeof self.fnCallBack == 'function'){
                    var fnresult;
                    self.doConfirm && self.doConfirm();
                    self.fnCallBack && (fnresult = self.fnCallBack());

                    

                    if(fnresult === false || fnresult === ''){
                        return false;
                    }else{
                        // 关闭弹出层
                        setTimeout(function(){
                            self.close();
                        },self.settings.timeOut);
                    }
                }else{
                    setTimeout(function(){
                        self.close();
                    },self.settings.timeOut);
                }




            }
            if(abtns[abtns.length-2]){
                abtns[abtns.length-2].onclick = function(){
                    setTimeout(function(){
                        self.close();
                    },self.settings.timeOut);
                }
            }
        }

        for (var i = 0; i < abtns.length; i++) {

            if(!buttons[i].fn && this.constructor == Zdialog){
                abtns[i].onclick = function(){
                    setTimeout(function(){
                        self.close();
                    },self.settings.timeOut);
                };
            }

            if(abtns.length>=1){

                if(this.constructor == Zalert){
                    var self = this;
                    abtns[abtns.length-1].onclick = function(){
                        if(typeof self.fnCallBack == 'function'){
                            self.fnCallBack && self.fnCallBack();
                        }
                        setTimeout(function(){
                            self.close();
                        },self.settings.timeOut);
                    }
                }else if(this.constructor == Zdialog){
                    abtns[abtns.length-1].onclick = function(){
                        var oldfn = buttons[abtns.length-1].fn;
                        var fnresult = oldfn();
                        if(fnresult === false || fnresult === ''){
                            return false;
                        }else{
                            // 关闭弹出层
                            oldfn();
                            setTimeout(function(){
                                self.close();
                            },self.settings.timeOut);
                        }                        
                    }
                }
            }

            //绑定函数
            if(buttons[i].fn instanceof Function){
                abtns[i].onclick = function(){
                    // 如果按钮上有函数，存下来
                    var oldfn = buttons[i].fn;
                    // 定义新函数
                    var newfn = function(){
                        // 先执行已有的函数
                        var fnresult = oldfn();
                        if(fnresult === false || fnresult === ''){

                            return false;
                        }else{
                            // 关闭弹出层
                            //oldfn();

                            setTimeout(function(){
                                self.close();
                            },self.settings.timeOut);
                        }
                    }
                    // 返回 newfn
                    return newfn;
                }();
            }
        }
    }
};

Zdialog.prototype.setStyle = function(oContainter,omask){
    var self = this;
    this.settings.width = this.settings.width.toString();
    if(this.settings.width.indexOf("px")!=-1){
        var dw = 'px';
    }else if(this.settings.width.indexOf("%")!=-1){
        var dw = '%';
    }else if(this.settings.width.indexOf("rem")!=-1){
        var dw = 'rem';
    }else{
        var dw = 'px'
    }
    
    oContainter.style.width = parseFloat(this.settings.width) + dw;
    oContainter.style.height = parseFloat(this.settings.height) + dw;
    oContainter.style['min-height'] = parseFloat(this.settings.minHeight) + 'px';

    if(this.settings.opacity && omask){
        //omask.style.zIndex = 9999;
        omask.style.opacity = this.settings.opacity;
    }

    oContainter.style.position = 'fixed';
    if(omask){
        oContainter.style.zIndex = parseInt(omask.style.zIndex) + 1;
    }

    this.setpos(oContainter,omask);

    window.onresize = function(){
        self.setpos(oContainter);
    }
}

//set containter position
Zdialog.prototype.setpos = function(oContainter){
    var self = this;

    if(this.settings.className && this.settings.className.indexOf("allAlert") != -1 ){
        oContainter.style.left = 0;
        oContainter.style.top = 0;
        this.settings.dir = "normal";
    }

    if(this.settings.left || this.settings.top || this.settings.bottom || this.settings.right){
        this.settings.dir = null;
        oContainter.style.left = parseInt(this.settings.left) + 'px';
        oContainter.style.top = parseInt(this.settings.top) + 'px';
        oContainter.style.bottom = parseInt(this.settings.bottom) + 'px';
        oContainter.style.right = parseInt(this.settings.right) + 'px';
    }

    if(this.settings.dir == 'center'){
        /*oContainter.style.left = parseInt((viewWidth() - oContainter.offsetWidth)/2) + 'px';
         oContainter.style.top = parseInt((viewHeight() - oContainter.offsetHeight/2)/2) + 'px';*/
        oContainter.style.left = "50%";
        oContainter.style.top = "50%";
       // oContainter.style.marginTop = -oContainter.offsetHeight/2 + 'px';
       // oContainter.style.marginLeft = -oContainter.offsetWidth/2 + 'px';
        oContainter.style.transform = 'translate(-50%,-50%)';
    }
}

Zdialog.prototype.close = Zdialog.close = function(){
    document.body.removeChild(this.containter);
    this.closeMask();
}

Zdialog.prototype.closeMask = Zdialog.closeMask = function(){
    var omask = document.getElementById('mask');
    omask && document.body.removeChild(omask);
}

function extend(obj1,obj2){
    for(attr in obj2){
        if(obj2 && obj2.hasOwnProperty(attr)){
            obj1[attr] = obj2[attr];
        }
    }
}

function viewWidth(){
    return document.documentElement.clientWidth;
}
function viewHeight(){
    return document.documentElement.clientHeight;
}

var Zalert = function(opt,fnCallBack){

    var self = this;

    /*if(document.getElementById('containter')){
        return;
    }*/

    if(this instanceof Zalert){
        this.settings = {};
        //this.settings.className='';
        this.fnCallBack = fnCallBack;
        extend(this.settings,SETTINGS);
        this.settings.title = '提示';
        this.settings.className = 'am-modal-dialog';
        this.settings.buttons = [];
    }else{
        return new Zalert(opt,fnCallBack);
    }
    //this.settings.className ? opt.className = 'containter ' + this.settings.className + ' ' + (opt.className ? opt.className : '') : 'containter';
    if(typeof opt == 'string'){
        this.settings.content = opt;
        this.settings.className ? this.settings.className = 'containter ' + this.settings.className + ' ' : 'containter';
    }else{
        this.settings.className ? opt.className = 'containter ' + this.settings.className + ' ' + (opt.className ? opt.className : '') : 'containter';
    }
    this.init(opt);
    if(this.settings.dragable === true){
        new Drag('containter').init();
    }
    
    setTimeout(function(){
        $("#containter").animate({
            'opacity' : 0,
        },'1000',function(){
            self.close();
        })               
    },1000)
}

extend(Zalert.prototype,Zdialog.prototype);

Zalert.prototype.init = function (opt){
    extend(this.settings,opt);
    this.create();
}

var Zconfirm = function(opt,fnCallBack){

    var self = this;

    if(document.getElementById('containter')){
        return;
    }

    if(this instanceof Zconfirm){
        this.settings = {};

        this.fnCallBack = fnCallBack;
        extend(this.settings,SETTINGS);
        this.settings.className = 'zconfirm comfirms am-modal-dialog';
        this.settings.title = '';
        this.settings.buttons = [{
            text :'取消',
            className : "cancelBtn am-modal-btn"
        },{
            text :'确定',
            className : "comfirmBtn am-modal-btn"
        }
        ];
    }else{
        return new Zconfirm(opt,fnCallBack);
    }
    if(typeof opt == 'string'){
        this.settings.content = opt;
        this.settings.className ? this.settings.className = 'containter ' + this.settings.className + ' ' : 'containter';
    }else{
        this.settings.className ? opt.className = 'containter ' + this.settings.className + ' ' + (opt.className ? opt.className : '') : 'containter';
        this.settings.width = opt.width || "80%";
    }

    this.init(opt);
    if(this.settings.dragable === true){
        new Drag('containter').init();
    }
}

extend(Zconfirm.prototype,Zdialog.prototype);

Zconfirm.prototype.init = function (opt){
    extend(this.settings,opt);
    this.create();
}


function Drag(id){
    this.obj = document.getElementById(id);
    this.disX = 0;
    this.disY = 0;
}
Drag.prototype.init=function(){
    var This = this;
    this.obj.onmousedown = function(ev){
        var ev = ev || event;
        This.fnDown(ev);
        document.onmousemove = function(ev){
            var ev = ev || event;
            This.fnMove(ev);
        };
        document.onmouseup = function(){
            This.fnUp();
        };
        return false;
    };

    return this;
};

Drag.prototype.fnDown=function(ev){
    this.disX = ev.clientX - this.obj.offsetLeft;
    this.disY = ev.clientY - this.obj.offsetTop;
};

Drag.prototype.fnMove = function(ev){
    this.obj.style.left =ev.clientX-this.disX+'px';
    this.obj.style.top =ev.clientY-this.disY+'px';
};

Drag.prototype.fnUp = function(){
    document.onmousemove = null;
    document.onmouseup = null;
};

function ChildDrag(id){
    Drag.call(this,id);
}

extend(ChildDrag.prototype , Drag.prototype);

ChildDrag.prototype.fnMove = function(ev){

    var L = ev.clientX - this.disX;
    var T = ev.clientY - this.disY;
    if (L < 0){
        L = 0;
    } else if(L>document.documentElement.clientWidth-this.obj.offsetWidth){
        L = document.documentElement.clientWidth-this.obj.offsetWidth;
    }

    this.obj.style.left = L + 'px';
    this.obj.style.top = T + 'px';
}