/** * @title 弹窗插件【仿微信】wcPop-v1.0 beta (UTF-8) * @Create hison * @Timer 2018/03/30 11:30:45 GMT+0800 (中国标准时间) */ !function(win){ var _doc = win.document, _docEle = _doc.documentElement, index = 0, util = { $: function(id){ return _doc.getElementById(id); }, touch: function(o, fn){ o.addEventListener("click", function(e){ fn.call(this, e); }, !1); }, //获取插件js路径 jspath: function(){ for(var s = _doc.getElementsByTagName("script"), i = s.length; i > 0; i--) if(s[i-1].src && s[i-1].src.match(/wcPop[\w\-\.]*\.js/) != null) return s[i-1].src.substring(0, s[i-1].src.lastIndexOf("/")+1); }, timer: {} }, wcPop = function(options){ var _this = this, config = { id: 'wcPop', //弹窗ID标识 (不同ID对应不同弹窗) title: '', //标题 content: '', //内容 style: '', //自定弹窗样式 skin: '', //自定弹窗显示风格 ->目前支持配置 toast(仿微信toast风格)、footer(底部对话框风格)、actionsheet(底部弹出式菜单)、ios|android(仿微信样式) icon: '', //弹窗小图标(success | info | error | loading) shade: true, //是否显示遮罩层 shadeClose: true, //是否点击遮罩时关闭层 anim: 'scaleIn', //scaleIn:缩放打开(默认) fadeIn:渐变打开 fadeInUpBig:由上向下打开 fadeInDownBig:由下向上打开 rollIn:左侧翻转打开 shake:震动 footer:底部向上弹出 time: 0, //设置弹窗自动关闭秒数1、 2、 3 zIndex: 9999, //设置元素层叠 btns: null, //不设置则不显示按钮,btn参数: [{按钮1配置}, {按钮2配置}] end: null //层销毁后的回调函数 }; _this.opts = options; for(var i in config){ if(!(i in _this.opts)){ _this.opts[i] = config[i]; } } _this.init(); }; wcPop.prototype = { init: function(){ var _this = this, opt = _this.opts, xwbox = null, ftBtns = function(){ if(!opt.btns) return; var btnTpl = ""; for(var i in opt.btns){ btnTpl += ''+opt.btns[i].text+''; } return btnTpl; }(); util.$(opt.id) ? (xwbox = util.$(opt.id)) : (xwbox = _doc.createElement("div"), xwbox.id = opt.id); opt.skin && (xwbox.setAttribute("type", opt.skin)); xwbox.setAttribute("index", index); xwbox.setAttribute("class", "wcPop wcPop"+index); xwbox.innerHTML = [ '
', /**遮罩*/ opt.shade ? ('
') : '', /**窗体*/ '
\
\
', opt.title ? ('
'+opt.title+'
') : '', opt.content ? ('
'+(opt.skin == "toast" && opt.icon ? ('
') : '') + opt.content +'
') : '', opt.btns ? '
'+ftBtns+'
' : '', '
\
\
\
' ].join(''); //_doc.body.insertBefore(xwbox, _doc.body.childNodes[0]); _doc.body.appendChild(xwbox); this.index = index++; _this.callback(); }, callback: function(){ var _this = this, opt = _this.opts; //自动关闭弹窗 if(opt.time){ util.timer[_this.index] = setTimeout(function(){ exports.close(_this.index); typeof opt.end == "function" && opt.end.call(_this); }, opt.time * 1000); } //按钮事件 if(opt.btns){ for (var o = util.$(opt.id).getElementsByClassName("popui__panel-btn")[0].children, len = o.length, i = 0; i < len; i++) util.touch(o[i], function(e){ var idx = this.getAttribute("data-index"), btn = opt.btns[idx]; typeof btn.onTap === "function" && btn.onTap(e); }); } //点击遮罩层关闭 if(opt.shade && opt.shadeClose){ var c = util.$(opt.id).getElementsByClassName("popui__modal-mask")[0]; util.touch(c, function () { exports.close(_this.index) }); } }, //获取弹窗最大层级 maxIndex: function(){ for(var idx = this.opts.zIndex, elem = _doc.getElementsByTagName("*"), i = 0, len = elem.length; i < len; i++) idx = Math.max(idx, elem[i].style.zIndex); return idx; } }; var exports = (function(){ //实例化弹窗(返回 弹窗索引值) fn = function(args){ var o = new wcPop(args); return o.index; }; //关闭弹窗 fn.close = function(index){ var index = index ? index : ""; var o = _doc.getElementsByClassName("wcPop"+index)[0]; if(o){ o.setAttribute("class", "wcPop-close"); setTimeout(function(){ _doc.body.removeChild(o); clearTimeout(util.timer[index]); delete util.timer[index]; }, 200) } } //加载css fn.load = function(path){ for(var ck = _doc.createElement("link"), lk = _doc.getElementsByTagName("link"), i = lk.length; i > 0; i--) if(lk[i-1].href == path) return; ck.type="text/css"; ck.rel = "stylesheet"; ck.href = util.jspath() + path; _doc.getElementsByTagName("head")[0].appendChild(ck); }; //更多接口 fn.moreAPI = function(title, content, time){ var opts = { title: title, content: content, time: time } fn(opts); }; return fn; }()); //加载css exports.load("skin/wcPop.css"); win.wcPop = exports; }(window);