所有网站都通用的自定义弹出框alert

                       

A.所有网站都通用的自定义弹出框.A
 
 
    
        
        
    
   

</body><script>    var Alert = function(data){        //没有数据则返回        if(!data){            return;        }        //设置内容        this.content = data.content;        //创建提示框面板        this.panel = document.createElement('div');        //创建提示内容组件        this.contentNode = document.createElement('p');        //创建确定按钮组件        this.confirmBtn = document.createElement('span');        //创建关闭按钮组件        this.closeBtn = document.createElement('b');        //为提示框面板添加类        this.panel.className = 'alert';        //为关闭按钮添加类        this.closeBtn.className = 'a-close';        //为确定按钮添加类        this.confirmBtn.className = 'a-confirm';        //为确定按钮添加文案        this.confirmBtn.innerHTML = data.confirm || '确认';        //为提示内容添加文案        this.contentNode.innerHTML = this.content;        //点击确认按钮执行方法，如果data中有success方法则为success方法，否则为空函数        this.success = data.success || function(){};        //点击关闭按钮执行方法        this.fail = data.fail || function(){};    }    //提示框原型方法    Alert.prototype = {        //创建方法        init : function(){            //生成提示框            this.panel.appendChild(this.closeBtn);            this.panel.appendChild(this.contentNode);            this.panel.appendChild(this.confirmBtn);            //插入页面中            document.body.appendChild(this.panel);            //绑定事件            this.bindEvent();            //显示提示框            this.show();        },        bindEvent : function(){            var me = this;            //关闭按钮点击事件            this.closeBtn.onclick = function(){                //执行关闭取消方法                me.fail();                //隐藏弹层                me.hide();            }            //确定按钮事件            this.confirmBtn.onclick = function(){                //执行关闭方法                me.success();                //隐藏弹层                me.hide();            }        },        //隐藏弹层方法        hide : function(){            this.panel.style.display = 'none';        },        //显示弹层方法        show : function(){            this.panel.style.display = 'block';        }    }    /*扩展其他类型弹层*/    //右侧提示框    var RightAlert = function(data){        //继承基本提示框构造函数        Alert.call(this,data);        //为确认按钮添加right类设置位置居右        this.confirmBtn.className = this.confirmBtn.className + 'right';    }    //继承基本提示框方法    RightAlert.prototype = new Alert();    //标题提示框    var TitleAlert = function(data){        //继承基本提示框构造函数        Alert.call(this,data);        //设置标题内容        this.title = data.title;        //创建标题组件        this.titleNode = document.createElement('h3');        //标题组件中写入标题内容        this.titleNode.innerHTML = this.title;    }    //继承基本提示框方法    TitleAlert.prototype = new Alert();    //对基本提示框创建 方法扩展    TitleAlert.prototype.init = function(){        //插入标题        this.panel.insertBefore(this.titleNode,this.panel.firstChild);        //继承基本提示框init方法        Alert.prototype.init.call(this);    }    //带有取消按钮的弹出框    var CancelAlert = function(data){        TitleAlert.call(this,data);        //取消按钮文案        this.cancel = data.cancel;        this.cancelBtn = document.createElement('span');        this.cancelBtn.className = 'cancel';        this.cancelBtn.innerHTML = this.cancel || '取消';    }    CancelAlert.prototype = new Alert();    CancelAlert.prototype.init = function(){        TitleAlert.prototype.init.call(this);        this.panel.appendChild(this.cancelBtn);    }    CancelAlert.prototype.bindEvent = function(){        var me = this;        TitleAlert.prototype.bindEvent.call(me);        this.cancelBtn.onclick = function(){            me.fail();            me.hide();        }    }    new CancelAlert({        title : '提示标题',        content : '别问我为什么没有样式，我只精通js',        success : function(){            console.log('ok');        },        fail : function(){            console.log('cancel');        }    }).init();</script>
  
  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139

请欣赏这漂亮的js代码半个小时。