H5+css3+原生js开发的移动端动画弹窗插件xwPop.js(多调用方式)

这是一款基于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