autojs 权限申请弹框_js自定义弹框插件的封装

弹出层提示信息，这是移动前端开发中最常见的需求，你可能会想到一些流行的弹框插件，比如 经典的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')

},

c