自己封装一个弹框插件
弹出层提示信息,这是移动前端开发中最常见的需求,你可能会想到一些流行的弹框插件,比如 经典的artDialog 炫酷的Sweetalert等等..
但是慢慢地你其实会发现通常情况下需求定制化要求较高,一般的弹框插件可能只满足大部分要求,自定义花的时间还不如手动自己封装一个符合自己开发习惯的弹框组件,这样后续开发效率将大大提高。
首先整理一下思路,原生javascript其实是有实现alert()方法的,但是那个会暂时性中断程序运行,并且足以让你丑拒!那么抛开这些细细一想,其实弹框就是两个div层,一个浮在底下的蒙层(遮罩层),将所有的元素遮起来,并且最好是半透明。另一个就是弹框主体部分了,一般情况需要水平垂直居中,并且通常包含标题,主体内容需要可定制,如果是模态框通常还有确认/取消按钮。最后就是弹出、关闭的时候一些动效。
所以说完全可以自己封装一个,然后放在项目中公共js中去。能自己手写的尽量不用插件....
一些默认属性值
通过一个foreach循环,类似于传入的opts继承了defaultOpts属性,在调用弹框之前执行的before()方法,相当于一些准备工作
var defaultOpts = {title: '',//标题content: '',//内容 文字 || htmlheight: 50,//默认屏幕(父级)的50%width: 80,//默认屏幕(父级)的80%type: 'alert-default',//弹框类型effect: 'fadeIn',//出现效果,默认下跌落delayTime: 500,//效果延时时间,默认.5sautoClose: false,//自动关闭autoTime: 2000, //自动关闭时间默认2sautoEffect: 'default',//关闭效果ok: '确定',okCallback: function(){},//确定回调cancel: '取消',cancelCallback: function(){},//取消回调before : function() {console.log('before')}, close: function() {console.log('close')},blankclose: false//空白处点击关闭}for (i in defaultOpts) {if (opts[i] === undefined) {opts[i] = defaultOpts[i]}} opts.before && opts.before()
dom结构
定义一个数组对象,里面放弹框的dom元素,alert-mask为全屏的遮罩层,alert-content为弹框的主要内容区,最后通过.join(‘’)函数将数组转换为html ,再用jquery的append()方法追加在body节点最后。
var alertHtml = ['<section class="alert-main" id="alertMain">','<div class="alert-mask li-opacity" id="alertMask"></div>','<div class="alert-content '+ opts.type +'" id="alertContent">',opts.content +'</div>','</section>']$('body').append(alertHtml.join(''))
设置高宽了,水平垂直居中
我这里是采用fixed定位,然后height是传进来的高(百分比),top距离屏幕顶端距离百分比为 100-传进来的高 /2 ,这样就实现了垂直居中,同理宽度也一样。这种水平垂直居中的办法也是自己长期实践总结出来自己认为最简单最实用的,兼容各种屏幕大小,当然还有很多方法,可以自行尝试
var $alertContent = $('#alertContent'),$alertMain = $('#alertMain');$alertContent.css({'height': opts.height + '%','top': (100 - opts.height)/2 + '%','width': opts.width + '%','left': (100 - opts.width)/2 + '%'})$('.li-opacity').css({'-webkit-animation-duration' : opts.delayTime/1000 + 's'})
最后一句是给遮罩层赋一个动画执行时间,实现淡入效果。详情见下面的CSS @-webkit-keyframes opacity
弹框效果
我这里实现了四个效果,分别是fadeIn跌落,sideLeft从左侧飞入,scale放大,info提示信息。可以看到,我是定义了一个集合对象,分别放置了对应的css属性,然后通过两个setTimeout函数统一赋值
var effect = {'fadeIn': 'top','fadeInStart': '-100%','fadeInValue': (100 - opts.height)/2 + '%','sideLeft': 'left','sideLeftStart': '-100%','sideLeftValue': (100 - opts.width)/2 + '%','scale': '-webkit-transform','scaleStart': 'scale(0)','scaleValue': 'scale(1)','info': '-webkit-transform','infoStart': 'scale(1.2)','infoValue': 'scale(1)'}setTimeout(function(){$alertContent.css(effect[opts.effect],effect[opts.effect + 'Start']).addClass('alert-show')setTimeout(function(){$alertContent.css(effect[opts.effect], effect[opts.effect + 'Value'])opts.close && opts.close()},10)},opts.delayTime)
空白处点击关闭
通常情况下的需求,都会是要点击弹框空白处关闭弹框,一个点击事件搞定,重点是前面的选择器,jquery给了我们太多方便.... 当然最后为了防止点击到页面其他元素,阻止事件冒泡,组件默认行为..
if(opts.blankclose) {$('.alert-main :not(.alert-content)').on('click',function(event){$alertMain.remove()opts.close && opts.close()event.stopPropagation()event.preventDefault()})}
自动关闭
当autoClose为true,并且autoTime大于零时,用一个延时事件自动关闭弹框
if(opts.autoClose && opts.autoTime > 0) {setTimeout(function(){$alertMain.remove()},opts.autoTime)opts.close && opts.close()}
演示:
css
@-webkit-keyframes opacity {0% {opacity: 0; /*初始状态 透明度为0*/}50% {opacity: 0; /*中间状态 透明度为0*/}100% {opacity: 1; /*结尾状态 透明度为1*/}}.li-opacity {-webkit-animation-name: opacity; /*动画名称*/-webkit-animation-iteration-count: 1; /*动画次数*/-webkit-animation-delay: 0s; /*延迟时间*/}.alert-mask {position: fixed;height: 100%;width: 100%;left: 0%;top: 0%;z-index: 9998;background-color: rgba(0,0,0,.7);}.alert-content {position: fixed;box-sizing: border-box;border-radius: 4px;z-index: 9999;-webkit-transition: .4s;-moz-transition: .4s;transition: .4s;display: none;}.alert-show {display: block;}.alert-default {background-color: white;}
html
<p class="alert" data-flag="fadeIn">fadeIn</p><p class="alert" data-flag="sideLeft">sideLeft</p><p class="alert" data-flag="scale">scale</p><p class="alert" data-flag="info">info</p>
js
require.config({jquery:'component/jquery/jquery-3.1.0.min',liAlert: 'li/li-alert',//常用弹框组件 })require(['jquery'],function($){require(['liAlert'],function(){$('.alert').on('click',function(event){$.alert({content: '<h1 style="display:flex;justify-content:center;">我是弹框</h1>',effect: $(event.currentTarget).attr('data-flag'),blankclose: true,//autoClose: true})})})})
效果图
完整的代码已上传github: https://github.com/helijun/component/tree/master/alert
转载于:https://www.cnblogs.com/libin-1/p/6181953.html
自己封装一个弹框插件相关推荐
- 后台系统-新增和编辑共用一个弹框(基于vue和element-ui)
如图所示: 点击新增角色和编辑会弹出一个弹框,弹框只写一个,如何实现共用同一结构,功能却不相同呢? 首先给这两个按钮定义一个点击事件,事件名为openDialog 这里不同的是 给编辑这个按钮根据作用 ...
- vue---安装使用vue-layer弹框插件
vue安装使用vue-layer弹框插件步骤 (1)安装vue-layer npm install --save vue-layer (2)在[src]目录下的[main.js]中引入vue-laye ...
- vue 进入首页只弹一个弹框_vue.js实现只弹一次弹框
核心代码是 getCookie()部分,控制弹框的显示隐藏则在 created()中. Lorem ipsum dolor sit amet, consectetur adipisicing elit ...
- Skyline WEB端开发3——添加一个弹框
相对于之前的功能而言,弹出弹框就比较容易了,在skyline中有提供Window, 包含所有与三维窗口互动的相关功能. 创建弹窗的方法 Creator.CreatePopupMessage Creat ...
- vue 组件封装 确认弹框带可以自定义titile ,内容,和取消,确定按钮的弹窗 slot插槽
一,子组件 modalConfirm.vue 文件封装 <template><div class="confirmBgc animations" :style=& ...
- 弹框插件sweetalert
1.SweetAlert可以替代Javascript原生的alert和confirm等函数呈现的弹出提示框,它将提示框进行了美化,并且允许自定义,支持设置提示框标题.提示类型.内容展示图片.确认取消按 ...
- 弹框插件self(动效兼容到IE9,功能兼容IE6)
<!DOCTYPE html> <html> <head lang="en"><meta charset="UTF-8" ...
- 怎样监听 ESC 键 完成一个弹框关闭
vue如何监听 ESC 键 window.addEventListener v-on:keyup.esc window.addEventListener 在Vue中,可以通过监听窗口上的键盘事件来实现 ...
- idea插件开发(01)---最简单的helloworld版,不需要知道原理,先跟我做一个最简单的弹框插件
前言 用了那么多idea插件,也想自己做一个插件,下面就是入门版本 你不需要先知道所有的概念,先跟着我的步骤做一个小;例子,后面再说原理 相关概念看后面一篇 本次以windos系统为例 开始 1.你得 ...
最新文章
- Hadoop会遇到的45个问题,你确定你了解吗?
- 注入(二):修改导入表(c++)
- 计算机系统操作工培训视频,计算机系统操作工培训第三篇.ppt
- P142-144使用Tensorflow自定义一个线性分类器用于对“良/恶性乳腺癌肿瘤”进行预测
- android 动态壁纸
- erp框架 saas_传统ERP软件和SaaS管理软件的区别
- Spring Boot 使用 Dom4j XStream 操作 Xml
- mybatis mysql 方言_mybatis-MyBatits执行效率问题
- 课程设计2 终结版-未测试
- 软件实施工程师是一个什么样的工作?他的具体工作内容是什么?发展前景怎样?.
- 最新emoji表情代码大全_在 Markdown 中使用表情符号
- Everything Toolbar - 文件搜索神器everything的增强插件
- 你一定没见过的windows操作系统——windows93
- 超级电容模组电压不均衡特性分析
- 流,向量场,和微分方程
- MSP432 FPU与DSP测试
- 解决win10 VC++6.0 应用程序无法正常运行 0xc0000142
- 疯狂鼹鼠 java,神话延续! 光滑镜面时尚MOTO轻薄W220详尽评测
- 如何关闭360防火墙
- Grafana部署监控docker服务
热门文章
- Intellij IDEA中maven更新不下来pom中的jar包,reimport失效
- Java中JFrame怎样控制闪烁_在JFrame Java中闪烁
- 程序人生:入门程序员最容易踩的 7 个坑!
- Java技术:为什么不推荐使用BeanUtils属性转换工具
- 网络技巧:分享几个路由器设置小技巧,总有用得到的一天!
- 消息队列遥测传输(MQTT)介绍
- html 科幻模板,html5酷炫宇宙科幻周年庆典专题动画模板
- Linux c编译库路径,【一点一点学Linux C】交叉编译时候如何配置连接库的搜索路径...
- jdbc.properties文件
- 查看安卓APK源码破解