java前端 js弹出框_前端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);

$(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;

}

使用方式

new Dialog(DIALOG_DIALOG).show() | hide()

new Dialog(DIALOG_LOAD).show() | hide()

new Dialog(DIALOG_TOAST).show(time : number) | hide()

效果如下

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。