前端前端js弹出框组件使用方法弹出框组件使用方法
下面分享一个js 弹出窗, 分 toast , dialog , load 三种弹窗 , 下面用js css 来实现以下：
首先是js代码 | 采用了 es6 的写法
//公共弹窗加载动画
const DIALOG_TOAST = '1',
DIALOG_DIALOG = '2',
DIALOG_LOAD = '3',
class Dialog {
constructor(type = DIALOG_DIALOG,
dialogContent = '请求失败',
wrapClassName = 'common-dialog-wrap',
dialogWrapClassName = 'common-dialog-content-wrap',
contentClassName = 'common-dialog-content',
btnClassName = 'common-btn',
btnContent = '确定') {
this.type = type;
//吐司
if (type == DIALOG_TOAST) {
this.dialog = document.createElement('div');
this.dialog.className = 'common-toast';
this.dialog.innerHTML = dialogContent;
}
//加载动画
else if (type == DIALOG_LOAD) {
this.dialog = document.createElement('div');
this.dialog.className = wrapClassName;
this.figure = document.createElement('figure');
this.figure.className = 'common-loadGif';
this.img = document.createElement('img');
this.img.src = getAbsolutePath() + '/fenqihui/static/bitmap/travel/loadgif.gif';
this.figure.appendChild(this.img);
this.dialog.appendChild(this.figure);
} else if (type == DIALOG_DIALOG) {
this.dialog = document.createElement('div');
this.dialog.className = wrapClassName;
this.dialogWrap = document.createElement('div');
this.dialogWrap.className = dialogWrapClassName;
this.conetent = document.createElement('p');
this.conetent.innerHTML = dialogContent;
this.conetent.className = contentClassName;
this.confirmButton = document.createElement('p');
this.confirmButton.innerHTML = btnContent;
this.confirmButton.className = btnClassName;
this.dialogWrap.appendChild(this.conetent);
this.dialogWrap.appendChild(this.confirmButton);
this.dialog.appendChild(this.dialogWrap);
this.bindEvent();
}
}
bindEvent() {
this.confirmButton.addEventListener('click', ()=> {
this.hide();
})
}
show(time) {
document.querySelector('body').appendChild(this.dialog);
资源评论
