网站建设执行风险,视频网站怎么做防盗链,微网站微名片,描述网站建设的具体流程弹出层提示信息#xff0c;这是移动前端开发中最常见的需求#xff0c;你可能会想到一些流行的弹框插件#xff0c;比如 经典的artDialog 炫酷的Sweetalert等等.. 但是慢慢地你其实会发现通常情况下需求定制化要求较高#xff0c;一般的弹框插件可能只满足大部分要求#…弹出层提示信息这是移动前端开发中最常见的需求你可能会想到一些流行的弹框插件比如 经典的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 classalert-main idalertMain,div classalert-mask li-opacity idalertMask/div,div classalert-content opts.type idalertContent,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 classalert data-flagfadeInfadeIn/pp classalert data-flagsideLeftsideLeft/pp classalert data-flagscalescale/pp classalert data-flaginfoinfo/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 styledisplay:flex;justify-content:center;我是弹框/h1,effect: $(event.currentTarget).attr(data-flag),blankclose: true,//autoClose: true})})})}) 效果图 完整的代码已上传github https://github.com/helijun/component/tree/master/alert ITer请跟随兴趣一路前行个人站点www.liliangel.cn欢迎指导交流转载于:https://www.cnblogs.com/libin-1/p/6181953.html
