前端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 相关文章推荐
用户注册常用javascript代码
Aug 29 Javascript
jquery+json实现的搜索加分页效果
Mar 31 Javascript
javascript 跨浏览器开发经验总结(五) js 事件
May 19 Javascript
js中onload与onunload的使用示例
Aug 25 Javascript
jquery实现预览提交的表单代码分享
May 21 Javascript
基于jQuery实现仿51job城市选择功能实例代码
Mar 02 Javascript
利用Vue v-model实现一个自定义的表单组件
Apr 27 Javascript
vue.js之vue-cli脚手架的搭建详解
May 05 Javascript
Bootstrap 模态对话框只加载一次 remote 数据的完美解决办法
Jul 09 Javascript
js中DOM事件绑定分析
Mar 18 Javascript
javascript中this的用法实践分析
Jul 29 Javascript
微信小程序入门之指南针
Oct 22 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
wordpress之wp-settings.php
2007/08/17 PHP
php的大小写敏感问题整理
2011/12/29 PHP
php中$_POST与php://input的区别实例分析
2015/01/07 PHP
php使用Jpgraph绘制3D饼状图的方法
2015/06/10 PHP
Zend Framework自定义Helper类相关注意事项总结
2016/03/14 PHP
PHP简单实现文本计数器的方法
2016/04/28 PHP
PHP二维数组矩形转置实例
2016/07/20 PHP
值得分享的php+ajax实时聊天室
2016/07/20 PHP
laravel实现一个上传图片的接口,并建立软链接,访问图片的方法
2019/10/12 PHP
Javascript insertAfter() 实现函数代码
2011/10/12 Javascript
js data日期初始化的5种方法
2013/12/29 Javascript
JavaScript实现信用卡校验方法
2015/04/07 Javascript
JavaScript和jQuery获取input框的绝对位置实现方法
2016/10/13 Javascript
JS+html5 canvas实现的简单绘制折线图效果示例
2017/03/13 Javascript
详解vue-cli+es6引入es5写的js(两种方法)
2019/04/19 Javascript
[53:38]OG vs LGD 2018国际邀请赛淘汰赛BO3 第三场 8.26
2018/08/30 DOTA
Python中shutil模块的常用文件操作函数用法示例
2016/07/05 Python
Python文本相似性计算之编辑距离详解
2016/11/28 Python
python3 unicode列表转换为中文的实例
2018/10/26 Python
python调用摄像头拍摄数据集
2019/06/01 Python
python语言线程标准库threading.local解读总结
2019/11/10 Python
Django之form组件自动校验数据实现
2020/01/14 Python
Python标准库json模块和pickle模块使用详解
2020/03/10 Python
小结Python的反射机制
2020/09/28 Python
基于注解实现 SpringBoot 接口防刷的方法
2021/03/02 Python
使用before和:after伪类制作css3圆形按钮
2014/04/08 HTML / CSS
英国最大的在线蜡烛商店:Candles Direct
2019/03/26 全球购物
酒店实习个人鉴定
2013/12/07 职场文书
职员竞岗演讲稿
2014/05/14 职场文书
大学生就业自荐书
2014/06/16 职场文书
事业单位年度考核个人总结
2015/02/12 职场文书
营业员岗位职责范本
2015/04/14 职场文书
2016个人廉洁自律承诺书
2016/03/25 职场文书
人民币使用说明书
2019/04/17 职场文书
vue项目两种方式实现竖向表格的思路分析
2021/04/28 Vue.js
基于docker安装zabbix的详细教程
2022/06/05 Servers