本文介绍如何使用ES6语法封装前端通用的三种弹窗组件：Toast消息提示、Dialog对话框以及Load加载动画。通过定义公共类与CSS样式，实现灵活的显示与隐藏控制，适用于移动端及Web页面的交互场景。
前端JS实现Toast、Dialog与Load三种弹窗组件
本文介绍一种基于JavaScript实现的通用弹窗方案，主要涵盖Toast（消息提示）、Dialog（对话框）以及Load（加载动画）三种类型，并分别提供对应的JS逻辑与CSS样式代码。
核心JavaScript代码部分采用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);
$(this.dialog).css('display', 'block');
if (this.type == DIALOG_TOAST) {
setTimeout(()=> {
$(this.dialog).css('display', 'none');
}, time);
}
}
hide() {
$(this.dialog).css('display', 'none');
}
}
配套的CSS样式文件定义了弹窗的基础外观与布局，确保在不同屏幕尺寸下的显示效果。
/*公共弹窗*/
.common-dialog-wrap {
position: fixed;
background: rgba(0,0,0,.7);
z-index: 100;
height: 100%;
width: 100%;
top: 0;
}
.common-dialog-content {
height: 2rem;
border-bottom: 1px solid #ccc7c7;
line-height: 2rem;
text-align: center;
font-size: .65rem;
}
.common-btn {
text-align: center;
height: 2rem;
color: orange;
line-height: 2rem;
}
.common-dialog-content-wrap{
background: #fff;
width: 10rem;
height: 4rem;
border-radius: 5px;
position: fixed;
left: 0;
top:0;
right: 0;
bottom: 0;
margin: auto;
}
/*吐司样式*/
.common-toast{
height: 1.6rem;
width: 4rem;
box-sizing: content-box;
color: #fff;
padding: 0 10px;
position: fixed;
left: 0;
top:0;
bottom: 0;
right: 0;
text-align: center;
line-height: 1.6rem;
margin: auto;
background: rgba(0,0,0,.7);
border-radius: 2rem;
}
.common-loadGif{
height: 4rem;
width: 4rem;
position: fixed;
top:0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
}
.common-loadGif img{
height: 100%;
width: 100%;
border-radius: 10px;
}
实际调用方式通过实例化Dialog类并指定类型参数来实现，支持show()与hide()方法控制显隐。
new Dialog(DIALOG_DIALOG).show() | hide()
new Dialog(DIALOG_LOAD).show() | hide()
new Dialog(DIALOG_TOAST).show(time : number) | hide()
运行效果展示了三种弹窗在页面中的实际表现，包括提示框、确认框及加载状态的视觉反馈。
以上内容为前端弹窗组件的完整实现方案，旨在为开发者提供简洁高效的交互组件参考。