1. 程式人生 > >純js h5 彈出框

純js h5 彈出框

	win.MESSAGER2 = function(){
		var self={};
		var __myAnimationEnd="animationend webkitAnimationEnd";
		var $__shadow, $__messager, $__middle, $__middle, $__bottom, __lockScroll = false;
		var __mWidth = (window.screen.width|| document.documentElement.clientWidth || document.documentElement.getBoundingClientRect().width) * 0.85;
		var __options={
			title:""
			,content:""
			,showCancel:false
			,cancelText:"取消"
			,confirmText:"確定"
			,success:null
			,complete:null
			,mode:"alert"
			,duration:1500
			,mask:false
			,showClose:true
			,borderRadius:true
			,borderRadiusClass:"border-radius"
			,boxShadow:true
		};
		function margeOptions(options){
			JSONIntersection(__options, options);
		}
		function hide(){
			if(__options.mode!="toast"){
				$__messager.addClass("fadeOut").on(__myAnimationEnd,function end(){
					$(this).removeClass("fadeOut").off(__myAnimationEnd,end);
					$__shadow.remove();
					$__shadow=null;
				});
			} else {
				$__shadow.remove();
				$__shadow=null;
			}
		}
		function createMessager(){
			$__messager = $("<messager2>");
			__options.boxShadow&&$__messager.addClass("box-shadow");
			__options.borderRadius&&$__messager.addClass(__options.borderRadiusClass);
			if(__options.mode =="alert" && __options.title){
				$__messager.append($("<top>",{"html":__options.title}));
			}
			if(!__options.content){
				$__messager.addClass("default-size")
			}
			
			if(__options.showClose&&__options.mode=="sticker") {
				var $btnClose = $("<btnClose>").appendTo($__messager);
				$btnClose.on(ctrlType,function(){
					event&&event.stopPropagation();
					if(__options.success || typeof __options.success == "function"){
						__options.success.call(this)
					}
					hide();
				})
			}
			$__middle=$("<middle>",{"html":__options.content});
			$__messager.append($__middle);
			if(__options.mode =="alert" && $__bottom){
				$__messager.append($__bottom);
			}
			if(__options.mask){
				$__shadow.addClass("mask");
			}
			$__shadow.append($__messager);
		};
		function show(){
			createMessager();
			$__shadow.addClass(__options.mode).addClass("show")
			if(__options.mode=="toast"){
				if(__options.duration){
					$__messager.css({"animation-duration":__options.duration+"ms","-webkit-animation-duration":__options.duration+"ms"})
				}
				$__messager.on(__myAnimationEnd,hide).addClass("toast-fadeIn");
			} else {
				$__messager.addClass("fadeIn").on(__myAnimationEnd,function end(){
					$(this).removeClass("fadeIn").off(__myAnimationEnd,end);
				});
			}
			if(__options.complete || typeof __options.complete == "function"){
				__options.complete.call(this,self);
			}
		}
		function MESSAGER2(){
			
			self.show=function(){
				show();
			}
			self.hide=function(){
				hide();
			}
			self.alert=function(options){
				__options.mode="alert";
				__options.mask=true;
				margeOptions(options);
				$__bottom = $("<bottom>");
				if(__options.showCancel){
					var $btnConfirm = $("<btn>",{class:"cancel",html:__options.cancelText}).attr("data-type","cancel");
					$__bottom.append($btnConfirm);
				}
				var $btnConfirm = $("<btn>",{class:"confirm",html:__options.confirmText}).attr("data-type","confirm");
				$__bottom.append($btnConfirm);
				$__bottom.on(ctrlType,"btn",function(){
					if(__options.success || typeof __options.success == "function"){
						__options.success.call(this,{
							confirm:$(this).attr("data-type")=="confirm"
							,cancel:$(this).attr("data-type")=="cancel"
						})
					}
					hide();
				})
				show();
				return self;
			}
			self.sticker=function(options){
				__options.mode="sticker";
				margeOptions(options);
				show();
				return self;
			}
			self.toast=function(options){
				__options.mode="toast";
				margeOptions(options);
				show();
				return self;
			}
			$__shadow=$("<message2-shadow>").attr("id",new Date().getTime());
			
			$("body").append($__shadow);
			return self;
		}
		return new MESSAGER2();
	};