├── .gitignore
├── LICENSE
├── README.md
├── README2.md
├── alert.html
├── confirm.html
├── js
    └── component.js
└── toast.html


/.gitignore:
--------------------------------------------------------------------------------
1 | # Created by .ignore support plugin (hsz.mobi)
2 | .idea


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2017 零度逍遥
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # popup
  2 | 最小巧的移动端弹窗组件，toast、alert、confirm，使用原生js，不依赖任何类库，不需要引入任何css文件，只有一个js文件
  3 | 
  4 | **组件设计为单例模式，在一个打开状态，再次打开另一个，会自动关闭上一个**
  5 | 
  6 | ## 1. toast
  7 | ```
  8 | let toast = new ToastClass();
  9 | ```
 10 | 
 11 |  - 方法
 12 | 
 13 |       方法名    | 说明
 14 |       :----:  | :----:
 15 |       show    | 打开方法
 16 |       hide  | 关闭方法
 17 |       onShow | 打开时回调（全局）
 18 |       onHide | 关闭时回调（全局）
 19 | 
 20 | ### toast打开方法
 21 | ```
 22 | toast.show(options)
 23 | ```
 24 | 
 25 | - options
 26 | 
 27 |      | 参数    | 类型   |  默认值  | 说明|
 28 |      | :----:  | :----:  | :----: |:----: |
 29 |      | text    | String | 正在加载 | 展示文本|
 30 |      | loading  | Boolean |  false  | 是否展示loading图标|
 31 |      | duration | Number  |  无  | 持续时间（ms）|
 32 |      | onShow | Function  |  无  | 打开时回调|
 33 |      | onHide | Function  |  无  | 关闭时回调|
 34 | 
 35 | - 示例 （可参考 [toast.html](https://github.com/lingdublog/popup/blob/master/toast.html) ）
 36 | ```
 37 | toast.show({
 38 |     text: '正在加载',
 39 |     duration: 2000,
 40 |     onShow: function(){
 41 |         console.log('打开了toast')
 42 |     }
 43 | })
 44 | ```
 45 | 
 46 | ### toast关闭方法
 47 | ```
 48 | toast.hide()
 49 | ```
 50 | 
 51 | 
 52 | ## 2. alert
 53 | ```
 54 | let alert = new AlertClass();
 55 | ```
 56 | 
 57 |  - 方法
 58 | 
 59 |       方法名    | 说明
 60 |       :----:  | :----:
 61 |       show    | 打开方法
 62 |       hide  | 关闭方法
 63 |       onShow | 打开时回调（全局）
 64 |       onHide | 关闭时回调（全局）
 65 | 
 66 | ### alert打开方法
 67 | ```
 68 | alert.show(options)
 69 | ```
 70 | 
 71 | - options
 72 | 
 73 |      | 参数    | 类型   |  默认值  | 说明|
 74 |      | :----:  | :----:  | :----: |:----: |
 75 |      | title    | String | 无 | 标题|
 76 |      | content  | String | 无 | 内容|
 77 |      | btnText  | String |  确定 | 按钮文本|
 78 |      | onShow | Function  |  无  | 打开时回调|
 79 |      | onHide | Function  |  无  | 关闭时回调|
 80 | 
 81 | - 示例 （可参考 [alert.html](https://github.com/lingdublog/popup/blob/master/alert.html) ）
 82 | ```
 83 | alert.show({
 84 |     title: '提示标题',
 85 |     content: '提示内容',
 86 |     onShow: function(){
 87 |         console.log('打开了alert')
 88 |     }
 89 | })
 90 | ```
 91 | 
 92 | ### alert关闭方法
 93 | ```
 94 | alert.hide()
 95 | ```
 96 | 
 97 | 
 98 | ## 3. confirm
 99 | ```
100 | let confirm = new ConfirmClass();
101 | ```
102 | 
103 |  - 方法
104 | 
105 |       方法名    | 说明
106 |       :----:  | :----:
107 |       show    | 打开方法
108 |       hide  | 关闭方法
109 |       onShow | 打开时回调（全局）
110 |       onHide | 关闭时回调（全局）
111 | 
112 | ### confirm打开方法
113 | ```
114 | confirm.show(options)
115 | ```
116 | 
117 | - options
118 | 
119 |      | 参数    | 类型   |  默认值  | 说明|
120 |      | :----:  | :----:  | :----: |:----: |
121 |      | title    | String | 无 | 标题|
122 |      | content  | String | 无 | 内容|
123 |      | btns  | Array |  见下方btns | 按钮文本/css类|
124 |      | onShow | Function  |  无  | 打开时回调|
125 |      | onHide | Function  |  无  | 关闭时回调|
126 | 
127 | - btns 默认值：[{text: '确定', class: 'confirm'}, {text: '取消', class: 'cancel'}]
128 | 
129 |      | 参数    | 类型   |  默认值  | 说明|
130 |      | :----:  | :----:  | :----: |:----: |
131 |      | text | String | 确定、取消  | 按钮文本|
132 |      | class | String | confirm、cancel | 按钮css类|
133 |      | callback | Function | 无 | 按钮点击回调|
134 | 
135 | - 示例 （可参考 [confirm.html](https://github.com/lingdublog/popup/blob/master/confirm.html) ）
136 | ```
137 | confirm.show({
138 |     title: '提示标题',
139 |     content: '提示内容',
140 |     btns: [{
141 |         callback: function(instance){
142 |             instance.close = false;
143 |             console.log('点击了确定按钮，但不会关闭弹窗');
144 |         }
145 |     }, {
146 |         text: '不需要',
147 |         callback: function(){
148 |             console.log('点击了不需要按钮');
149 |         }
150 |     }],
151 |     onShow: function(){
152 |         console.log('打开了confirm')
153 |     }
154 | })
155 | ```
156 | 
157 | ### confirm关闭方法
158 | ```
159 | confirm.hide()
160 | ```
161 | 
162 | 


--------------------------------------------------------------------------------
/README2.md:
--------------------------------------------------------------------------------
  1 | # popup
  2 | 最小巧的移动端弹窗组件，toast、alert、confirm，使用原生js，不依赖任何类库，不需要引入任何css文件，只有一个js文件
  3 | 
  4 | **组件设计为单例模式，在一个打开状态，再次打开另一个，会自动关闭上一个**
  5 | 
  6 | ## 1. toast
  7 | ```
  8 | let toast = new ToastClass();
  9 | ```
 10 | 
 11 |  - 方法
 12 | 
 13 |       方法名    | 说明
 14 |       :----:  | :----:
 15 |       show    | 打开方法
 16 |       hide  | 关闭方法
 17 |       onShow | 打开时回调（全局）
 18 |       onHide | 关闭时回调（全局）
 19 | 
 20 | ### toast打开方法
 21 | ```
 22 | toast.show(options)
 23 | ```
 24 | 
 25 | - options
 26 | 
 27 |      | 参数    | 类型   |  默认值  | 说明|
 28 |      | :----:  | :----:  | :----: |:----: |
 29 |      | text    | String | 正在加载 | 展示文本|
 30 |      | loading  | Boolean |  false  | 是否展示loading图标|
 31 |      | duration | Number  |  无  | 持续时间（ms）|
 32 |      | onShow | Function  |  无  | 打开时回调|
 33 |      | onHide | Function  |  无  | 关闭时回调|
 34 | 
 35 | - 示例 （可参考 [toast.html](https://github.com/lingdublog/popup/blob/master/toast.html) ）
 36 | ```
 37 | toast.show({
 38 |     text: '正在加载',
 39 |     duration: 2000,
 40 |     onShow: function(){
 41 |         console.log('打开了toast')
 42 |     }
 43 | })
 44 | ```
 45 | 
 46 | ### toast关闭方法
 47 | ```
 48 | toast.hide()
 49 | ```
 50 | 
 51 | ### 在线示例
 52 | [toast展示](http://works.lingdublog.cc/popup/toast.html)
 53 | 
 54 | 
 55 | ## 2. alert
 56 | ```
 57 | let alert = new AlertClass();
 58 | ```
 59 | 
 60 |  - 方法
 61 | 
 62 |       方法名    | 说明
 63 |       :----:  | :----:
 64 |       show    | 打开方法
 65 |       hide  | 关闭方法
 66 |       onShow | 打开时回调（全局）
 67 |       onHide | 关闭时回调（全局）
 68 | 
 69 | ### alert打开方法
 70 | ```
 71 | alert.show(options)
 72 | ```
 73 | 
 74 | - options
 75 | 
 76 |      | 参数    | 类型   |  默认值  | 说明|
 77 |      | :----:  | :----:  | :----: |:----: |
 78 |      | title    | String | 无 | 标题|
 79 |      | content  | String | 无 | 内容|
 80 |      | btnText  | String |  确定 | 按钮文本|
 81 |      | onShow | Function  |  无  | 打开时回调|
 82 |      | onHide | Function  |  无  | 关闭时回调|
 83 | 
 84 | - 示例 （可参考 [alert.html](https://github.com/lingdublog/popup/blob/master/alert.html) ）
 85 | ```
 86 | alert.show({
 87 |     title: '提示标题',
 88 |     content: '提示内容',
 89 |     onShow: function(){
 90 |         console.log('打开了alert')
 91 |     }
 92 | })
 93 | ```
 94 | 
 95 | ### alert关闭方法
 96 | ```
 97 | alert.hide()
 98 | ```
 99 | 
100 | ### 在线示例
101 | [alert展示](http://works.lingdublog.cc/popup/alert.html)
102 | 
103 | 
104 | ## 3. confirm
105 | ```
106 | let confirm = new ConfirmClass();
107 | ```
108 | 
109 |  - 方法
110 | 
111 |       方法名    | 说明
112 |       :----:  | :----:
113 |       show    | 打开方法
114 |       hide  | 关闭方法
115 |       onShow | 打开时回调（全局）
116 |       onHide | 关闭时回调（全局）
117 | 
118 | ### confirm打开方法
119 | ```
120 | confirm.show(options)
121 | ```
122 | 
123 | - options
124 | 
125 |      | 参数    | 类型   |  默认值  | 说明|
126 |      | :----:  | :----:  | :----: |:----: |
127 |      | title    | String | 无 | 标题|
128 |      | content  | String | 无 | 内容|
129 |      | btns  | Array |  见下方btns | 按钮文本/css类|
130 |      | onShow | Function  |  无  | 打开时回调|
131 |      | onHide | Function  |  无  | 关闭时回调|
132 | 
133 | - btns 默认值：[{text: '确定', class: 'confirm'}, {text: '取消', class: 'cancel'}]
134 | 
135 |      | 参数    | 类型   |  默认值  | 说明|
136 |      | :----:  | :----:  | :----: |:----: |
137 |      | text | String | 确定、取消  | 按钮文本|
138 |      | class | String | confirm、cancel | 按钮css类|
139 |      | callback | Function | 无 | 按钮点击回调|
140 | 
141 | - 示例 （可参考 [confirm.html](https://github.com/lingdublog/popup/blob/master/confirm.html) ）
142 | ```
143 | confirm.show({
144 |     title: '提示标题',
145 |     content: '提示内容',
146 |     btns: [{
147 |         callback: function(instance){
148 |             instance.close = false;
149 |             console.log('点击了确定按钮，但不会关闭弹窗');
150 |         }
151 |     }, {
152 |         text: '不需要',
153 |         callback: function(){
154 |             console.log('点击了不需要按钮');
155 |         }
156 |     }],
157 |     onShow: function(){
158 |         console.log('打开了confirm')
159 |     }
160 | })
161 | ```
162 | 
163 | ### confirm关闭方法
164 | ```
165 | confirm.hide()
166 | ```
167 | 
168 | ### 在线示例
169 | [confirm展示](http://works.lingdublog.cc/popup/confirm.html)
170 | 


--------------------------------------------------------------------------------
/alert.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <title>Alert</title>
 6 |   <script src='js/component.js'></script>
 7 | </head>
 8 | <body>
 9 | <button onclick="showAlert()">打开Alert</button>
10 | <script>
11 |   let alert = new AlertClass();
12 |   alert.onShow = function () {
13 |     console.log ('先执行内部定义的onShow');
14 |     console.log ('再执行全局定义的onShow')
15 |   };
16 |   alert.onHide = function () {
17 |     console.log ('执行全局的onHide')
18 |   };
19 |   function showAlert () {
20 |     alert.show({
21 |       title: '提示标题',
22 |       content: '提示内容',
23 |       btnText: '我知道了',
24 |       onShow: function(){
25 |         console.log('打开了alert')
26 |       },
27 |       onHide: function(){
28 |         console.log('关闭了alert')
29 |       }
30 |     })
31 |   }
32 | </script>
33 | 
34 | </body>
35 | </html>


--------------------------------------------------------------------------------
/confirm.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <title>Confirm</title>
 6 |   <script src='js/component.js'></script>
 7 | </head>
 8 | <body>
 9 | <button onclick="showConfirm()">打开Confirm</button>
10 | <script>
11 |   let confirm = new ConfirmClass();
12 |   confirm.onShow = function () {
13 |     console.log ('先执行内部定义的onShow');
14 |     console.log ('再执行全局定义的onShow')
15 |   };
16 |   confirm.onHide = function () {
17 |     console.log ('执行全局的onHide')
18 |   };
19 |   function showConfirm () {
20 |   	// 这里可以自定义
21 |     confirm.show({
22 |       title: '提示标题',
23 |       content: '提示内容',
24 |       btns: [{
25 |         callback: function(instance){
26 |           instance.close = false;
27 |           console.log('点击了确定按钮，但不会关闭弹窗');
28 |         }
29 |       }, {
30 |         text: '不需要',
31 |         callback: function(){
32 |           console.log('点击了不需要按钮');
33 |         }
34 |       }],
35 |       onShow: function(){
36 |         console.log('打开了confirm')
37 |       }
38 |     })
39 |   }
40 | </script>
41 | 
42 | </body>
43 | </html>


--------------------------------------------------------------------------------
/js/component.js:
--------------------------------------------------------------------------------
  1 | window.AlertClass = AlertClass;
  2 | window.ConfirmClass = ConfirmClass;
  3 | window.ToastClass = ToastClass;
  4 | 
  5 | 
  6 | // 组件样式，引入js自动引入
  7 | window.onload = function(){
  8 |   let componentStyle = document.createElement('style');
  9 |   let componentStyleHtml = '.component_mask{' +
 10 |     'position: fixed;z-index: 9998;width: 100%;height: 100%;top: 0;left: 0;' +
 11 |     'background: rgba(0,0,0,.3);}' +
 12 |     '.component_toast {' +
 13 |     'position: relative;top: 30%;margin: 0 auto;min-width: 200px;width: 50%;max-width: 300px;' +
 14 |     'padding: 10px;background: #fff;text-align: center;border-radius: 5px;}' +
 15 |     '.component_dialog {' +
 16 |     'position: fixed;z-index: 9999;min-width: 300px;top: 50%;left: 50%;' +
 17 |     '-webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%);background-color: #fafafc;' +
 18 |     'text-align: center;border-radius: 3px;}' +
 19 |     '.component_dialog_confirm .component_dialog .component_dialog_hd {' +
 20 |     'padding: 1.2em 20px .5em}' +
 21 |     '.component_dialog_confirm .component_dialog .component_dialog_bd {' +
 22 |     'text-align: left}' +
 23 |     '.component_dialog_hd {' +
 24 |     'padding: 1.2em 20px .5em;}' +
 25 |     '.component_dialog_title {' +
 26 |     'font-weight: 400;font-size: 17px;}' +
 27 |     '.component_dialog_bd {' +
 28 |     'padding: 0 20px;font-size: 15px;color: #888;word-wrap: break-word;word-break: break-all;}' +
 29 |     '.component_dialog_ft {' +
 30 |     'position: relative;line-height: 42px;margin-top: 20px;font-size: 17px;display: -webkit-box;' +
 31 |     'display: -webkit-flex;display: -ms-flexbox;display: flex;}' +
 32 |     '.component_dialog_ft .component_btn {' +
 33 |     'display: block;-webkit-box-flex: 1;-webkit-flex: 1;-ms-flex: 1;flex: 1;color: #999;' +
 34 |     'text-decoration: none;-webkit-tap-highlight-color: rgba(0, 0, 0, 0);border-left: 1px solid #d5d5d6;}' +
 35 |     '.component_dialog_ft .component_btn:first-child{border: none;}'+
 36 |     '.component_dialog_ft .component_btn:active {' +
 37 |     'background-color: #eee;}' +
 38 |     '.component_dialog_ft:after {content: " ";position: absolute;left: 0;top: 0;width: 100%;' +
 39 |     'height: 1px;border-top: 1px solid #d5d5d6;color: #d5d5d6;-webkit-transform-origin: 0 0;' +
 40 |     'transform-origin: 0 0;-webkit-transform: scaleY(.5);transform: scaleY(.5)}' +
 41 |     '.component_dialog_ft .confirm{' +
 42 |     'color: #3cc51f;}'+
 43 |     '.component_dialog_ft .cancel{' +
 44 |     'color: #E42626;}'+
 45 |     '.component_btn_dialog.default {color: #353535}.component_btn_dialog.primary {color: #0bb20c}';
 46 |   componentStyle.innerHTML = componentStyleHtml;
 47 |   document.body.appendChild(componentStyle);
 48 | };
 49 | 
 50 | 
 51 | // Toast弹窗
 52 | function ToastClass () {}
 53 | 
 54 | ToastClass.prototype.show = function (options) {
 55 |   if (this.instance) {
 56 |     this.hide ();
 57 |   }
 58 |   ToastClass.instance = this;
 59 |   let text = options.text || '正在加载';
 60 |   let duration = options.duration;
 61 |   this.showFn = options.onShow;
 62 |   this.hideFn = options.onHide;
 63 |   let loading = options.loading;
 64 | 
 65 |   let toast = document.createElement ('div');
 66 |   let innerHTMLArr = ['<div class="component_mask"><div class="component_toast">'];
 67 |   if (loading) {
 68 |     innerHTMLArr.push('<div><img src="data:image/gif;base64,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" ' +
 69 |       'width="26%" /></div>');
 70 |   }
 71 |   innerHTMLArr.push('<div style="font-size: 16px;margin:10px 0;">' + text + '</div></div></div>');
 72 |   toast.innerHTML = innerHTMLArr.join ('');
 73 |   document.body.appendChild (toast);
 74 | 
 75 |   // 开启事件
 76 |   this.showFn && this.showFn();
 77 |   // 如果有全局事件，则执行
 78 |   this.onShow && this.onShow();
 79 | 
 80 |   this.instance = toast;
 81 | 
 82 |   if (duration) {
 83 |     setTimeout (function () {
 84 |       ToastClass.instance.hide ();
 85 |     }, duration);
 86 |   }
 87 | 
 88 | };
 89 | 
 90 | ToastClass.prototype.hide = function () {
 91 |   let instance = this.instance;
 92 |   if (instance && instance.parentNode) {
 93 |     instance.parentNode.removeChild(instance);
 94 |   }
 95 | 
 96 |   // 关闭事件
 97 |   this.hideFn && this.hideFn();
 98 |   // 如果有全局事件，则执行
 99 |   this.onHide && this.onHide();
100 | };
101 | 
102 | 
103 | // 确认弹窗
104 | function ConfirmClass () {}
105 | 
106 | // 确认弹窗
107 | ConfirmClass.prototype.show = function (options) {
108 |   if (this.instance) {
109 |     this.hide ();
110 |   }
111 |   let defaultBtns = [{text: '确定', class: 'confirm'}, {text: '取消', class: 'cancel'}];
112 |   ConfirmClass.instance = this;
113 |   let title = options.title || '';
114 |   let content = options.content || '';
115 |   this.hideFn = options.onHide;
116 |   this.showFn = options.onShow;
117 |   this.close = true;
118 | 
119 |   // 如果配置项没有进行配置则使用默认的
120 |   if(!!options.btns){
121 |     let tempBtns = options.btns.slice(0, 2);
122 |     defaultBtns.forEach(function(v, i){
123 |       tempBtns[i] = tempBtns[i] || v;
124 |       for(let j in v){
125 |         tempBtns[i][j] = tempBtns[i][j] || v[j];
126 |       }
127 |     });
128 |     this.btns = tempBtns.concat(options.btns.slice(2));
129 |   }else{
130 |     this.btns = defaultBtns;
131 |   }
132 | 
133 |   let confirm = document.createElement ('div');
134 |   let btnHtml = '';
135 |   this.btns.forEach(function (v, i){
136 |     btnHtml += '<a class="component_btn '+ (v.class||'') +'" style="cursor: pointer;" onclick="ConfirmClass.btnClick('+ i +', event)">'+ (v.text||'确定') +'</a>'
137 |   });
138 |   confirm.innerHTML = ['<div class="component_mask">',
139 |     '<div class="component_dialog" id="ConfirmClass_ComfirmArea">',
140 |     '<div class="component_dialog_hd"><strong class="component_dialog_title">' + title + '</strong></div>',
141 |     '<div class="component_dialog_bd">' + content + '</div>',
142 |     '<div class="component_dialog_ft">',
143 |     btnHtml,
144 |     '</div></div></div>'].join ('');
145 | 
146 |   document.body.appendChild (confirm);
147 | 
148 |   // 开启事件
149 |   this.showFn && this.showFn();
150 |   // 如果有全局事件，则执行
151 |   this.onShow && this.onShow();
152 | 
153 |   this.instance = confirm;
154 | 
155 | };
156 | 
157 | ConfirmClass.btnClick = function (index){
158 |   let instance = ConfirmClass.instance;
159 |   if (typeof instance.btns[index].callback === 'function') {
160 |     instance.btns[index].callback(instance);
161 |   }
162 |   if (instance.close) {
163 |     instance.hide();
164 |   }else{
165 |     instance.close = true;
166 |   }
167 | 
168 | };
169 | 
170 | ConfirmClass.prototype.hide = function () {
171 |   let instance = this.instance;
172 |   if (instance && instance.parentNode) {
173 |     instance.parentNode.removeChild(instance);
174 |   }
175 | 
176 |   // 关闭事件
177 |   this.hideFn && this.hideFn();
178 |   // 如果有全局事件，则执行
179 |   this.onHide && this.onHide();
180 | };
181 | 
182 | 
183 | // alert弹窗
184 | function AlertClass () {}
185 | 
186 | 
187 | AlertClass.prototype.show = function (options) {
188 |   if (this.instance) {
189 |     this.hide ();
190 |   }
191 |   AlertClass.instance = this;
192 |   let title = options.title || '';
193 |   let content = options.content || '';
194 |   let btnText = options.btnText || '确定';
195 |   this.hideFn = options.onHide;
196 |   this.showFn = options.onShow;
197 | 
198 |   let alert = document.createElement ('div');
199 |   alert.innerHTML = ['<div class="component_mask">',
200 |     '<div class="component_dialog">',
201 |     '<div class="component_dialog_hd"><strong class="component_dialog_title">'+title+'</strong></div>',
202 |     '<div class="component_dialog_bd">'+content+'</div>',
203 |     '<div class="component_dialog_ft">',
204 |     '<a class="component_btn component_btn_dialog primary" onclick="AlertClass.btnClick()">'+btnText+'</a>',
205 |     '</div></div></div>'].join('');
206 | 
207 |   document.body.appendChild (alert);
208 | 
209 |   // 开启事件
210 |   this.showFn && this.showFn();
211 |   // 如果有全局事件，则执行
212 |   this.onShow && this.onShow();
213 | 
214 |   this.instance = alert;
215 | };
216 | 
217 | AlertClass.btnClick = function (){
218 |   let instance = AlertClass.instance;
219 |   instance.hide();
220 | };
221 | 
222 | AlertClass.prototype.hide = function () {
223 |   let instance = this.instance;
224 |   if (instance && instance.parentNode) {
225 |     instance.parentNode.removeChild(instance);
226 |   }
227 |   // 关闭事件
228 |   this.hideFn && this.hideFn();
229 |   // 如果有全局事件，则执行
230 |   this.onHide && this.onHide();
231 | };
232 | 


--------------------------------------------------------------------------------
/toast.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <title>Toast</title>
 6 |   <script src='js/component.js'></script>
 7 | </head>
 8 | <body>
 9 | <button onclick="showToast()">打开Toast</button>
10 | 
11 | <script>
12 |   let toast = new ToastClass();
13 |   toast.onShow = function () {
14 |     console.log ('先执行内部定义的onShow');
15 |     console.log ('再执行全局定义的onShow')
16 |   };
17 |   toast.onHide = function () {
18 |     console.log ('执行全局的onHide')
19 |   };
20 |   function showToast () {
21 |     toast.show({
22 |       loading: true,
23 |       onShow: function(){
24 |         console.log('打开了toast1');
25 |         setTimeout(function(){
26 |           toast.show({
27 |             text: '加载完成',
28 |             duration: 2000,
29 |             onHide: function(){
30 |               console.log('关闭了toast2')
31 |             }
32 |           })
33 |         }, 3000)
34 |       }
35 |     })
36 |   }
37 | 
38 | </script>
39 | 
40 | </body>
41 | </html>


--------------------------------------------------------------------------------