前端js弹出框组件使用方法


Posted in Javascript onAugust 24, 2020

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

效果如下

前端js弹出框组件使用方法

前端js弹出框组件使用方法

前端js弹出框组件使用方法

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js中cookie的使用详细分析
May 28 Javascript
JavaScript 题型问答有答案参考
Feb 17 Javascript
js 剪切板的用法(clipboardData.setData)与js match函数介绍
Nov 19 Javascript
AspNet中使用JQuery boxy插件的确认框
May 20 Javascript
VUEJS实战之修复错误并且美化时间(2)
Jun 13 Javascript
JavaScript用构造函数如何获取变量的类型名
Dec 23 Javascript
Javascript封装id、class与元素选择器方法示例
Mar 13 Javascript
ES6新特性之Symbol类型用法分析
Mar 31 Javascript
vue better-scroll插件使用详解
Jan 25 Javascript
详解用Node.js写一个简单的命令行工具
Mar 01 Javascript
关于echarts在节点显示动态数据及添加提示文本所遇到的问题
Apr 20 Javascript
微信小程序iOS下拉白屏晃动问题解决方案
Oct 12 Javascript
完美解决JS文件页面加载时的阻塞问题
Dec 18 #Javascript
教你一步步用jQyery实现轮播器
Dec 18 #Javascript
Angular.js实现注册系统的实例详解
Dec 18 #Javascript
无阻塞加载js,防止因js加载不了影响页面显示的问题
Dec 18 #Javascript
Node.js连接postgreSQL并进行数据操作
Dec 18 #Javascript
纯js实现悬浮按钮组件
Dec 17 #Javascript
Jquery Easyui搜索框组件SearchBox使用详解(19)
Dec 17 #Javascript
You might like
yii用户注册表单验证实例
2015/12/26 PHP
非常重要的php正则表达式详解
2016/01/04 PHP
PHP下的浮点运算不准的解决方法
2016/10/27 PHP
python进程与线程小结实例分析
2018/11/11 PHP
根据对象的某一属性进行排序的js代码(如:name,age)
2010/08/10 Javascript
基于jquery的监控数据是否发生改变
2011/04/11 Javascript
项目实践一图片上传之form表单还是base64前端图片压缩(前端图片压缩)
2016/07/28 Javascript
JavaScript实现公历转农历功能示例
2017/02/13 Javascript
express框架实现基于Websocket建立的简易聊天室
2017/08/10 Javascript
jQuery判断自定义属性data-val用法示例
2019/01/07 jQuery
详细分析React 表单与事件
2020/07/08 Javascript
Vue优化:常见会导致内存泄漏问题及优化详解
2020/08/04 Javascript
[03:49]DOTA2英雄基础教程 光之守卫
2014/01/14 DOTA
[41:52]2018DOTA2亚洲邀请赛3月29日小组赛B组Effect VS Secret
2018/03/30 DOTA
python数据结构之二叉树的统计与转换实例
2014/04/29 Python
使用python开发vim插件及心得分享
2014/11/04 Python
详解Python中contextlib上下文管理模块的用法
2016/06/28 Python
PyQt5实现五子棋游戏(人机对弈)
2020/03/24 Python
使用python telnetlib批量备份交换机配置的方法
2019/07/25 Python
Window10下python3.7 安装与卸载教程图解
2019/09/30 Python
基于Pytorch SSD模型分析
2020/02/18 Python
基于Python数据分析之pandas统计分析
2020/03/03 Python
python logging通过json文件配置的步骤
2020/04/27 Python
css3中检验表单的required,focus,valid和invalid样式
2014/02/21 HTML / CSS
可自定义箭头样式的CSS3气泡提示框
2016/03/16 HTML / CSS
css3 transform导致子元素固定定位变成绝对定位的方法
2020/03/06 HTML / CSS
Tenstickers法国:墙贴和装饰贴纸
2019/08/26 全球购物
质检部部长职责
2013/12/16 职场文书
运动会100米解说词
2014/01/23 职场文书
护士演讲稿优秀范文
2014/04/30 职场文书
法人代表证明书格式
2014/10/01 职场文书
保证金退回承诺函格式
2015/01/21 职场文书
六一儿童节园长致辞
2015/07/31 职场文书
2016新年致辞
2015/08/01 职场文书
JS实现数组去重的11种方法总结
2022/04/04 Javascript
解决Springboot PostMapping无法获取数据的问题
2022/05/06 Java/Android