弹出层提示信息,这是移动前端开发中最常见的需求,你可能会想到一些流行的弹框插件,比如经典的artDialog炫酷的Sweetalert等等. .
但是慢慢地你其实会发现通常情况下需求定制化要求较高,一般的弹框插件可能只满足大部分要求,自定义花的时间还不如手动自己封装一个符合自己开发习惯的弹框组件,这样后续开发效率将大大提高。
首先整理一下思路,原生javascript其实是有实现alert()方法的,但是那个会暂时性中断程序运行,并且足以让你丑拒!那么抛开这些细细一想,。
,所以说完全可以自己封装一个,然后放在项目中公共js中去。能自己手写的尽量不用插件....
<强>一些默认属性值
通过一个foreach循环,类似于传入的选择继承了defaultOpts属性,在调用弹框之前执行()之前的方法,相当于一些准备工作
var defaultOpts={
标题:",//标题
内容:",//内容文字| | html
高度:50,//默认屏幕(父级)的50%
宽度:80//默认屏幕(父级)的80%
类型:' alert-default ',//弹框类型
效果:渐明,//出现效果,默认下跌落
延迟时间:500//效果延时时间,默认0
autoClose:假的,//自动关闭
autoTime: 2000//自动关闭时间默认2 s
autoEffect:“违约”,//关闭效果
好:“确定”,
okCallback:函数(){},//确定回调
取消:“取消”,
cancelCallback:函数(){},//取消回调
:函数(){
console.log(之前的)
}，
关闭:函数(){
console.log(“关闭”)
}，
blankclose:假//空白处点击关闭
}
(我在defaultOpts) {
如果选择[我]===定义){
选择[我]=defaultOpts[我]
}
}
选择。之前,,opts.before ()
之前
<强> dom结构
定义一个数组对象,里面放弹框的dom元素,alert-mask为全屏的遮罩层,警报内容为弹框的主要内容区,最后通过. join()函数将数组转换为html,再用jquery的append()方法追加在身体节点最后。
var alertHtml=[
& lt;部分类=" alert-main " id=癮lertMain”在”,
& lt; div class=" alert-mask li-opacity " id=癮lertMask”祝辞& lt;/div>”,
“& lt; div=熬谌?选择类。类型”+“id=" alertContent "的,
选择。内容+“& lt;/div>”
“& lt;/section>”
]
$('体').append (alertHtml.join ("))
之前
<强>设置高宽了,水平垂直居中
我这里是采用固定的定位,然后高度是传进来的高(百分比),顶部距离屏幕顶端距离百分比为100 -传进来的高/2,这样就实现了垂直居中,同理宽度也一样。这种水平垂直居中的办法也是自己长期实践总结出来自己认为最简单最实用的,兼容各种屏幕大小,当然还有很多方法,可以自行尝试
var alertContent=美元(“# alertContent”),
美元alertMain=$ (' # alertMain ');
美元alertContent.css ({
“高度”:选择。身高+‘%’,
“顶级”:(100 - opts.height)/2 +‘%’,
“宽度”:选择。宽度+‘%’,
“左”:(100 - opts.width)/2 +‘%’
})
$ (' .li-opacity ') . css ({
“-webkit-animation-duration”: opts.delayTime/1000 +的”
})
之前
最后一句是给遮罩层赋一个动画执行时间,实现淡入效果。详情见下面不透明度的CSS @-webkit-keyframes
<强>弹框效果
我这里实现了四个效果,分别是渐显跌落,sideLeft从左侧飞入,放规模大,信息提示信息。可以看的到,我是定义了一个集合对象,分别放置了对应的css属性,然后通过两个setTimeout函数统一赋值
var={效果
“渐明”:“高级”,
“fadeInStart”:“-100%”,
“fadeInValue”: (100 - opts.height)/2 +‘%’,
“sideLeft”:“离开”,
“sideLeftStart”:“-100%”,
“sideLeftValue”: (100 - opts.width)/2 +‘%’,
“规模”:“-webkit-transform”,
“scaleStart”:“规模(0)”,
“scaleValue”:“规模(1)”,
“信息”:“-webkit-transform”,
“infoStart”:“规模(1.2)”,
“infoValue”:“规模(1)”
}
setTimeout(函数(){
美元alertContent.css(效应(opts.effect)效应[选择。效应+ '开始']).addClass (“alert-show”)
setTimeout(函数(){
(选择alertContent.css美元(效果。(选择效果,效果。影响+ '价值'])
选择。近,,opts.close ()
},10)
},opts.delayTime)
