js原型方式自定义弹窗

来源:互联网 发布:学校机房监控软件 编辑:程序博客网 时间:2024/06/06 03:09
function confirmAlert(){};

confirmAlert.prototype.make = function(title,content,falseTit,falseFn,trueTit,trueFn){
    this.content = content; //自定义弹窗的内容
    this.title = title || '温馨提示:'; //弹窗title
    this.falseBack = falseTit || "确定"; //确定
    this.falseFn = falseFn || denglu(); //点击确定的回调函数
    this.trueBack = trueBack || "取消"; //取消
    this.trueFn = trueFn || closealert(); //点击取消的回调函数
    var self = this;
    var div = document.createElement('div');
    div.setAttribute('id','alert-box')
    var iframe = "<div class='cover-layer'></div>"
        + "<div class='alert-box' style='width: 447px;'>"
        + "<div class='alert-th'>" + this.title + "<i class='icon-error' onclick='closeAlert()'><img src='http://huahan.oss-cn-hangzhou.aliyuncs.com/icon/alert-error.png?t=1,x-oss-process=image/resize,m_fill,h_18,w_18 '/></i></div>"
        + "<div class='alert-td' style='height: 230px;'>"
        +"<div class='alert-text' style='height: 120px; top: 26%;text-align: center;padding-top:80px;line-height:30px;'>" + this.content + "</div>"
        +"<div class='btn-con btn-l' onclick='"+this.falseFn+"' >"+this.falseBack+"</div><div class='btn-con btn-r' onclick='"+this.trueFn+"'>"+this.trueBack+"</div>"
        + "</div>"
        +"</div>";
    var body = document.getElementsByTagName('body')[0];
    div.innerHTML = iframe;
    body.appendChild(div);
}
//关闭弹窗
confirmAlert.prototype.close = function(){
    var body = document.getElementsByTagName('body')[0];
    var div = document.getElementById('alert-box');
    body.removeChild(div);
    window.clearTimeout(set_time);
};


var confirmalerts = new confirmAlert();
//点击关闭
function closealert(){
    confirmalerts.close();
}
原创粉丝点击