前端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 相关文章推荐
jQuery powerFloat万能浮动层下拉层插件使用介绍
Dec 27 Javascript
JavaScript高级程序设计 阅读笔记(十七) js事件
Aug 14 Javascript
JS 两日期相减,获得天数的小例子(兼容IE,FF)
Jul 01 Javascript
js控制input框只读实现示例
Jan 20 Javascript
jQuery+jsp实现省市县三级联动效果(附源码)
Dec 03 Javascript
Bootstrap警告(Alerts)的实现方法
Mar 22 Javascript
Javascript实现跨域后台设置拦截的方法详解
Aug 04 Javascript
vue不通过路由直接获取url中参数的方法示例
Aug 24 Javascript
echarts鼠标覆盖高亮显示节点及关系名称详解
Mar 17 Javascript
vue中使用axios post上传头像/图片并实时显示到页面的方法
Sep 27 Javascript
js中值引用和地址引用实例分析
Jun 21 Javascript
压缩Vue.js打包后的体积方法总结(Vue.js打包后体积过大问题)
Feb 03 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
php中filter_input函数用法分析
2014/11/15 PHP
PHP生成压缩文件实例
2015/02/07 PHP
orm获取关联表里的属性值
2016/04/17 PHP
Ubuntu上安装yaf扩展的方法
2018/01/29 PHP
PHP实现压缩图片尺寸并转为jpg格式的方法示例
2018/05/10 PHP
IE/FireFox具备兼容性的拖动代码
2007/08/13 Javascript
使用隐藏的new来创建对象
2011/03/29 Javascript
javascript实现页面刷新时自动清空表单并选中的方法
2015/07/18 Javascript
基于Jquery easyui 选中特定的tab
2015/11/17 Javascript
js实现iframe框架取值的方法(兼容IE,firefox,chrome等)
2015/11/26 Javascript
JS计算输出100元钱买100只鸡问题的解决方法
2018/01/04 Javascript
Angular学习教程之RouterLink花式跳转
2018/05/03 Javascript
vue 配置多页面应用的示例代码
2018/10/22 Javascript
详解vue中$nextTick和$forceUpdate的用法
2019/12/11 Javascript
React组件设计模式之组合组件应用实例分析
2020/04/29 Javascript
在react-antd中弹出层form内容传递给父组件的操作
2020/10/24 Javascript
[01:01]青春无憾,一战成名——DOTA2全国高校联赛开启
2018/02/25 DOTA
[01:14:55]EG vs Spirit Supermajor 败者组 BO3 第三场 6.4
2018/06/05 DOTA
[01:15]PWL S2开团时刻第二期——他们杀 我就白给
2020/11/25 DOTA
python中matplotlib实现最小二乘法拟合的过程详解
2017/07/11 Python
Python装饰器用法示例小结
2018/02/11 Python
Python 中的lambda函数介绍
2018/10/10 Python
Python数据集切分实例
2018/12/08 Python
Python绘制热力图示例
2019/09/27 Python
pytorch 实现查看网络中的参数
2020/01/06 Python
如何用Python编写一个电子考勤系统
2021/02/08 Python
美国电子元器件分销商:Newark element14
2018/01/13 全球购物
酒店值班经理的工作职责范本
2014/02/18 职场文书
保卫钓鱼岛口号
2014/06/20 职场文书
财会专业毕业生自荐信
2014/07/09 职场文书
基层干部个人对照检查及整改措施
2014/10/28 职场文书
2014年艾滋病防治工作总结
2014/12/10 职场文书
党校学习个人总结
2015/02/15 职场文书
工作感想范文
2015/08/07 职场文书
小学教代会开幕词
2016/03/04 职场文书
Vite + React从零开始搭建一个开源组件库
2022/06/25 Javascript