Front-End JS Popup component using method _javascript Tips

Share a JS pop-up window, divided toast, dialog, load three kinds of window, the following JS CSS to achieve the following:
First JS code | Using the ES6 of the writing

Public bullet window Loading animation const DIALOG_TOAST = ' 1 ', Dialog_dialog = ' 2 ', dialog_load = ' 3 ', class DIALOG {constructor (type = DI Alog_dialog, dialogcontent = ' request Failed ', Wrapclassname = ' common-dialog-wrap ', dialogwrapclassname = ' Common-dialo 


  G-content-wrap ', contentclassname = ' common-dialog-content ', btnclassname = ' common-btn ', btncontent = ' OK ') {

  This.type = type;
   Toast if (type = = Dialog_toast) {this.dialog = document.createelement (' div ');
   This.dialog.className = ' common-toast ';

  This.dialog.innerHTML = dialogcontent;
   //Load animation 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 ');

 }

}

The

CSS file is as follows:

* * Public Pinball window/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;
 }/* Toast style/* 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;
 }

How to use

New Dialog (Dialog_dialog). Show () | Hide ()
new Dialog (Dialog_load). Show () | Hide ()
new Dialog (Dialog_toast). Show (Time:number) | Hide ()

The effect is as follows

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.