这是一款基于HTML5和CSS3的弹出对话框,一共有9种调用类型,每种对话框弹出的时候均带有自定义的动画特效,比如警告时候的动画和加载时候的动画,提示时候的动画,都非常不错,而且调用方法非常简单,适合在移动端使用。而且该插件已经应用到项目案例开发中,而且效果还不错。
调用方法:
//msg提示 $("#bind_btn1").on("click", function(){ xwPop({ anim: 'fadeIn', content: '这里是msg提示框测试(5s后窗口关闭)', shade: true, shadeClose: false, time: 5 }); }); //msg提示(黑色背景) $("#bind_btn1_1").on("click", function(){ xwPop({ content: '这里是msg提示框测试(2s后窗口关闭)', shade: false, style: 'background: rgba(17,17,17,.7); color: #fff;', time: 2 }); }); //信息框 bind_btn2 = function () { var index = xwPop({ content: '信息框 (这里演示信息框功能效果,这里演示信息框功能效果,这里演示信息框功能效果)', shadeClose: true, anim: 'rollIn', btns: [ { text: '知道了', style: 'color: #999', onTap() { xwPop.close(index); console.log("知道了"); } } ] }); } //询问框 bind_btn3 = function () { xwPop({ title: '温馨提示~~~', content: '警告,非法操作非法操作非法操作非法操作非法操作非法操作非法操作!!!', shadeClose: false, anim: 'shake', btns: [ { text: '取消', onTap() { console.log('您点击了取消!'); xwPop.close(); } }, { text: '确定', onTap() { console.log('您点击了确定!'); } } ] }); }
插件效果截图:
xwPop = function(options){ var _this = this, config = { id: 'xwPop', //弹窗ID标识 (不同ID对应不同弹窗) title: '', //标题 content: '', //内容 style: '', //自定弹窗样式 skin: '', //自定弹窗显示风格 ->目前支持配置 toast(仿微信toast风格) footer(底部对话框风格)、msg(普通提示) 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配置}] }; _this.opts = options; for(var i in config){ if(!(i in _this.opts)){ _this.opts[i] = config[i]; } } _this.init(); }; xwPop.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 += '<span class="btn" data-index="'+i+'" style="'+(opt.btns[i].style ? opt.btns[i].style : '')+'">'+opt.btns[i].text+'</span>'; } return btnTpl; }(); util.$(opt.id) ? (xwbox = util.$(opt.id)) : (xwbox = _doc.createElement("div"), xwbox.id = opt.id); xwbox.setAttribute("index", index); xwbox.setAttribute("class", "xwPop xwPop"+index); xwbox.innerHTML = [ '<div class="popui__modal-panel" wx:if="{{showModalStatus}}">', /**遮罩*/ opt.shade ? ('<div class="popui__modal-mask" style="z-index:'+(_this.maxIndex()+1)+'"></div>') : '', /**窗体*/ '<div class="popui__panel-main" style="z-index:'+(_this.maxIndex()+2)+'">\ <div class="popui__panel-section">\ <div class="popui__panel-child '+(opt.anim ? 'anim-'+opt.anim : '')+' '+(opt.skin ? 'popui__'+opt.skin : '')+'" style="'+opt.style+'">', opt.title ? ('<div class="popui__panel-tit">'+opt.title+'</div>') : '', '<div class="popui__panel-cnt">', (opt.skin == "toast" && opt.icon ? ('<div class="popui__toast-icon"><img class="'+(opt.icon == "loading" ? "anim-loading" : '')+'" src="'+util.jspath()+'skin/'+opt.icon+'.png" /></div>') : '') + opt.content, '</div>', opt.btns ? '<div class="popui__panel-btnwrap">\ <div class="popui__panel-btn">'+ftBtns+'</div>\ </div>' : '', '</div>\ </div>\ </div>\ </div>' ].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; opt.onShow && opt.onShow(_this); //自动关闭弹窗 if(opt.time){ util.timer[_this.index] = setTimeout(function(){ interface.close(_this.index); }, opt.time * 1000); } //按钮事件 if(opt.btns){ for (var o = _doc.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 = _doc.getElementsByClassName("popui__modal-mask")[0]; util.touch(c, function () { interface.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; } };
——>>>如有疑问联系 QQ:282310962 微信:xy190310