js自定义弹框插件的封装


Posted in Javascript onAugust 24, 2020

弹出层提示信息,这是移动前端开发中最常见的需求,你可能会想到一些流行的弹框插件,比如 经典的artDialog 炫酷的Sweetalert等等..

但是慢慢地你其实会发现通常情况下需求定制化要求较高,一般的弹框插件可能只满足大部分要求,自定义花的时间还不如手动自己封装一个符合自己开发习惯的弹框组件,这样后续开发效率将大大提高。

首先整理一下思路,原生javascript其实是有实现alert()方法的,但是那个会暂时性中断程序运行,并且足以让你丑拒!那么抛开这些细细一想,其实弹框就是两个div层,一个浮在底下的蒙层(遮罩层),将所有的元素遮起来,并且最好是半透明。另一个就是弹框主体部分了,一般情况需要水平垂直居中,并且通常包含标题,主体内容需要可定制,如果是模态框通常还有确认/取消按钮。最后就是弹出、关闭的时候一些动效

 所以说完全可以自己封装一个,然后放在项目中公共js中去。能自己手写的尽量不用插件....

一些默认属性值

通过一个foreach循环,类似于传入的opts继承了defaultOpts属性,在调用弹框之前执行的before()方法,相当于一些准备工作

var defaultOpts = {
    title: '',//标题
    content: '',//内容 文字 || html
    height: 50,//默认屏幕(父级)的50%
    width: 80,//默认屏幕(父级)的80%
    type: 'alert-default',//弹框类型
    effect: 'fadeIn',//出现效果,默认下跌落
    delayTime: 500,//效果延时时间,默认.5s
    autoClose: false,//自动关闭
    autoTime: 2000, //自动关闭时间默认2s
    autoEffect: '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
    })
   })
  })
 })

效果图

js自定义弹框插件的封装

完整的代码已上传github: https://github.com/helijun/component/tree/master/alert

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

Javascript 相关文章推荐
js操作ajax返回的json的注意问题!
Feb 23 Javascript
jquery 学习之二 属性(html()与html(val))
Nov 25 Javascript
jQuery1.6 正式版发布并提供下载
May 05 Javascript
js css后面所带参数含义介绍
Aug 18 Javascript
JavaScript获取文本框内选中文本的方法
Feb 20 Javascript
JS实现仿微博可关闭弹出层效果
Sep 21 Javascript
Node.js如何响应Ajax的POST请求并且保存为JSON文件详解
Mar 10 Javascript
详解vue项目优化之按需加载组件-使用webpack require.ensure
Jun 13 Javascript
React学习笔记之列表渲染示例详解
Aug 22 Javascript
video.js 实现视频只能后退不能快进的思路详解
Aug 09 Javascript
微信小程序实现拼图小游戏
Oct 22 Javascript
详解JS ES6编码规范
May 07 Javascript
解决vue里碰到 $refs 的问题的方法
Jul 13 #Javascript
jsonp跨域请求详解
Jul 13 #Javascript
解决vue2.x中数据渲染以及vuex缓存的问题
Jul 13 #Javascript
JavaScript反弹动画效果的实现代码
Jul 13 #Javascript
详解React-Native解决键盘遮挡问题(Keyboard遮挡问题)
Jul 13 #Javascript
详解vue-cli + webpack 多页面实例配置优化方法
Jul 13 #Javascript
Angular限制input框输入金额(是小数的话只保留两位小数点)
Jul 13 #Javascript
You might like
php中文验证码实现示例分享
2014/01/12 PHP
PHP结合Jquery和ajax实现瀑布流特效
2016/01/07 PHP
PHP正则表达式入门教程(推荐)
2016/05/18 PHP
如何用PHP做到页面注册审核
2017/03/02 PHP
php检查函数必传参数是否存在的实例详解
2017/08/28 PHP
分析 JavaScript 中令人困惑的变量赋值
2007/08/13 Javascript
js点击页面其它地方将某个显示的DIV隐藏
2012/07/12 Javascript
jquery应该如何来设置改变按钮input的onclick事件
2012/12/10 Javascript
js格式化时间和js格式化时间戳示例
2014/02/10 Javascript
js实现点击后将文字或图片复制到剪贴板的方法
2014/08/04 Javascript
node.js入门实例helloworld详解
2015/12/23 Javascript
全面解析Bootstrap中tooltip、popover的使用方法
2016/06/13 Javascript
深入理解Node.js的HTTP模块
2016/10/12 Javascript
在一个页面重复使用一个js函数的方法详解
2016/12/26 Javascript
js实现网页定位导航功能
2017/03/07 Javascript
Vue3 中的数据侦测的实现
2019/10/09 Javascript
vue element table中自定义一些input的验证操作
2020/07/18 Javascript
[48:44]2014 DOTA2国际邀请赛中国区预选赛5.21 TongFu VS HGT
2014/05/22 DOTA
[09:33]2015国际邀请赛第四日TOP10
2015/08/08 DOTA
python 查找字符串是否存在实例详解
2017/01/20 Python
Python双向循环链表实现方法分析
2018/07/30 Python
Python实现多进程的四种方式
2019/02/22 Python
python自动化测试之DDT数据驱动的实现代码
2019/07/23 Python
python中下标和切片的使用方法解析
2019/08/27 Python
浅谈Python类中的self到底是干啥的
2019/11/11 Python
python实现堆排序的实例讲解
2020/02/21 Python
Python导入数值型Excel数据并生成矩阵操作
2020/06/09 Python
纯CSS实现设置半个字符的样式
2014/07/03 HTML / CSS
基于Jquery和Css3代码制作可以缩放的搜索框
2015/11/19 HTML / CSS
The North Face北面英国官网:美国著名户外品牌
2017/12/13 全球购物
小学爱国卫生月活动总结
2014/06/30 职场文书
党的群众路线教育实践活动调研报告
2014/11/03 职场文书
2015年大班保育员工作总结
2015/05/18 职场文书
成绩单家长意见
2015/06/03 职场文书
终止合同协议书范本
2016/03/22 职场文书
小学2016年“我们的节日·重阳节”活动总结
2016/04/01 职场文书