国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁 > 編程 > JavaScript > 正文

前端js彈出框組件使用方法

2019-11-19 18:24:28
字體:
來源:轉載
供稿:網友

下面分享一個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()

效果如下

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持武林網。

發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
主站蜘蛛池模板: 余干县| 福泉市| 南召县| 澄城县| 平谷区| 珲春市| 义马市| 湖口县| 温宿县| 芮城县| 文化| 虞城县| 南江县| 扬中市| 屯昌县| 子长县| 北碚区| 合阳县| 安仁县| 重庆市| 定南县| 图们市| 宜君县| 巨野县| 锡林郭勒盟| 南召县| 台南县| 门源| 泌阳县| 玉门市| 清流县| 措勤县| 高淳县| 合川市| 冷水江市| 枞阳县| 泸州市| 缙云县| 绥芬河市| 齐齐哈尔市| 那坡县|