前端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.boxy对话框插件代码
Oct 26 Javascript
JQuery的Ajax跨域请求原理概述及实例
Apr 26 Javascript
jquery给图片添加鼠标经过时的边框效果
Nov 12 Javascript
Extjs4实现两个GridPanel之间数据拖拽功能具体方法
Nov 21 Javascript
window.showModalDialog()返回值的学习心得总结
Jan 07 Javascript
javascript通过className来获取元素的简单示例代码
Jan 10 Javascript
bootstrap-datetimepicker实现只显示到日期的方法
Nov 25 Javascript
JavaScript无缝滚动效果的实例代码
Mar 27 Javascript
Vue中保存用户登录状态实例代码
Jun 07 Javascript
JavaScript输入框字数实时统计更新
Jun 17 Javascript
基于JavaScript实现一个简单的Vue
Sep 26 Javascript
微信小程序使用canvas自适应屏幕画海报并保存图片功能
Jul 25 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
仿AS3实现PHP 事件机制实现代码
2011/01/27 PHP
深入PHP运行环境配置的详解
2013/06/04 PHP
php计算一个文件大小的方法
2015/03/30 PHP
PHP开发中解决并发问题的几种实现方法分析
2017/11/13 PHP
thinkphp3.2框架中where条件查询用法总结
2019/08/13 PHP
PHP的Trait机制原理与用法分析
2019/10/18 PHP
JavaScript中this关键字使用方法详解
2007/03/08 Javascript
Ext 表单布局实例代码
2009/04/30 Javascript
js触发onchange事件的方法说明
2014/03/08 Javascript
Javascript实现的常用算法(如冒泡、快速、鸽巢、奇偶等)
2014/04/29 Javascript
js完美解决IE6不支持position:fixed的bug
2015/04/24 Javascript
jquery实现键盘左右翻页特效
2015/04/30 Javascript
JS实现常见的TAB、弹出层效果(TAB标签,斑马线,遮罩层等)
2015/10/08 Javascript
JavaScript:Date类型全面解析
2016/05/19 Javascript
在 Angular 中实现搜索关键字高亮示例
2017/03/21 Javascript
简述vue中的config配置
2018/01/23 Javascript
vue下拉菜单组件(含搜索)的实现代码
2018/11/25 Javascript
JavaScript中import用法总结
2019/01/20 Javascript
一篇文章,教你学会Vue CLI 插件开发
2019/04/17 Javascript
angular8和ngrx8结合使用的步骤介绍
2019/12/01 Javascript
使用vue-cli3+typescript的项目模板创建工程的教程
2020/02/28 Javascript
Python开发如何在ubuntu 15.10 上配置vim
2016/01/25 Python
Python numpy 常用函数总结
2017/12/07 Python
快速了解Python相对导入
2018/01/12 Python
Python实现二维曲线拟合的方法
2018/12/29 Python
FFrpc python客户端lib使用解析
2019/08/24 Python
Python 最强编辑器详细使用指南(PyCharm )
2019/09/16 Python
详解Python中打乱列表顺序random.shuffle()的使用方法
2019/11/11 Python
CSS3中的常用选择器使用示例整理
2016/06/13 HTML / CSS
移动端HTML5开发神器之vconsole详解
2020/12/15 HTML / CSS
汽车维修专业自荐书
2014/05/26 职场文书
党的生日活动方案
2014/08/15 职场文书
高一学年自我鉴定范文(3篇)
2014/09/26 职场文书
浅析CSS在DevTools 中架构演变
2021/10/05 HTML / CSS
Tomcat弱口令复现及利用
2022/05/06 Servers
pytorch实现加载保存查看checkpoint文件
2022/07/15 Python