简单的toast提示,确认弹窗,显示图片预览插件

JS

/**
*  team777 dialog plugins
*   author  eric
*   created  2016.1.21
**/
(function(win){
	'use strict';
	var Team777Dialog={
		/**
		 *  demo :   toast("上传成功！");
		     toast({close:false,closeTime:1000});
		**/
		curSelector:"",
		toast:function(){//
			var options={
				close:true,//是否自动关闭窗口 true为自动 false为不自动手动关闭
				closeTime:1000,//自动关闭窗口时间  默认1000ms 关闭
				msg:"toast消息提示窗！", //消息提示消息
				css:{"background":"#000",color:"#fff",width:"auto"},
				callback:function(){
					if(console){
						console.log("消息提示消息");
					}
				}
			}
			var args=arguments;
			if(args.length>0){
				if(typeof(args[0])==="string"){
					options["msg"]=args[0];
				}else if(isJson(args[0])){
					if(args[0]){
						for(var i in args[0]){
							options[i]=args[0][i];
						}
					}
				}
			}
			showToast(options);
		},
		//关闭toast
		closeToast:function(){
			var options={};
			if(arguments.length>0){
				options=arguments[0];
			}
			hideToast(options);
		},
		//关闭confirm
		closeConfirm:function(){
			var options={};
			if(arguments.length<1){
				options=arguments[0];
			}
			hideConfirm(options);
		},
		/**
		*  显示确认
		*/
		confirm:function(){
			var options={
				title:"确认窗口",//窗口标题
				msg:"config消息提示窗！", //消息提示消息
				close:false,//默认不显示关闭
				ok:true,//是否显示OK按钮
				okTxt:"Ok",//oK按钮文字
				cancel:true,//是否显示取消按钮
				cancelTxt:"Cancel",//取消按钮文字
				cancelCall:function(){
					if(console){
						console.log("取消按钮消息");
					}
				},
				okCall:function(){
					if(console){
						console.log("确认按钮消息");
					}
				}
			}
			var args=arguments;
			if(args.length>0){
				if(typeof(args[0])==="string"){
					options["msg"]=args[0];
				}else if(isJson(args[0])){
					if(args[0]){
						for(var i in args[0]){
							options[i]=args[0][i];
						}
					}
				}
			}
			showConfirm(options);
		},
		imgPreview:function(options){
			showImgPreview(options);
		},
		closeImgPreview:function(){
			var options={};
			if(arguments.length<1){
				options=arguments[0];
			}
			closePreview(options);
		}
	};

	/**
	判断是否为json对象
	*/
	function isJson(obj){
		var isjson = typeof(obj) == "object" && Object.prototype.toString.call(obj).toLowerCase() == "[object object]" && !obj.length;
		return isjson;
	}

	/**
	* 显示图片预览
	*/
	function showImgPreview(options){
		showCover();
		// var sc=$("body").scrollTop();
		Team777Dialog.curSelector=".art-img-preview";
		$(".art-img-prev").off("click");
		$(".art-img-next").off("click");
		if($(".art-img-preview").length>0){
			var htmlArr=[];
			var imgs=options.imgs;
			if(imgs){
				var len=imgs.length;
				for(var i=0;i<len;i++){
					htmlArr.push('<li><img src="'+imgs[i]+'" alt=""></li>');
				}
			}
			$("#slider").html(htmlArr.join(""));
			$(".art-img-preview").show();
		}else{
			var htmlArr=['<div class="art-img-preview">'];
			htmlArr.push('<div class="art-img-head">');
			htmlArr.push('<h3></h3>');
			htmlArr.push('<i class="ico-del">×</i>');
			htmlArr.push('</div>');
			htmlArr.push('<div class="art-img-body" id="sliderContainer">');
			htmlArr.push('<div class="art-img-prev">&lt;</div>');
			htmlArr.push('<div class="art-img-slider-box slider-box">');
			htmlArr.push('<ul class="art-img-slider" id="slider">');
			var imgs=options.imgs;
			if(imgs){
				var len=imgs.length;
				for(var i=0;i<len;i++){
					htmlArr.push('<li><img src="'+imgs[i]+'" alt=""></li>');
				}
			}
			htmlArr.push('</ul>');
			htmlArr.push('</div>');
			htmlArr.push('<div class="art-img-next">&gt;</div>');
			htmlArr.push('</div>');
			htmlArr.push('</div>');
			// htmlArr.push('<h3>'+options.msg+'</h3>');
			$("body").append(htmlArr.join(""));
			$(".art-img-preview").on("click",".ico-del",function(){
				if(options.cancelCall){
					options.cancelCall();
				}
				closePreview(options);
			});
		}
		// $(".art-img-preview").css("marginTop",sc);
		if(options.callback){
			options.callback();
		}
		var width=$(".art-img-preview").outerWidth(),height=$(".art-img-preview").outerHeight();
		// console.log("art-img-preview---width="+width+",height="+height);
		$(".art-img-preview").css({"marginTop":-height/2,"marginLeft":-width/2});
	}

	function closePreview(options){
		if(!options){
			options={};
		}
		$(".art-img-preview").fadeOut();
		if(!options.cover){
			hideCover();
		}
	}

	/**
	* 显示toast
	*/
	function showToast(options){
		Team777Dialog.curSelector=".art-toast";
		showCover();
		// var sc=$("body").scrollTop();
		$(".art-toast").off("click",".ico-del");
		if($(".art-toast").length>0){
			$(".toa-body h3").html(options.msg);
			if(options.close){
				//存在删除按钮则隐藏
				if($(".art-toast .ico-del").length>0){
					$(".art-toast .ico-del").hide();
				}
				//自动关闭
				setTimeout(function(){
					hideToast(options);
				},options.closeTime);
			}else{
				//不存在删除则创建出来
				if($(".art-toast .ico-del").length<1){
					$(".toa-body").append('<i class="ico-del">×</i>');
				}else{
					//若需要主动关闭 存在就显示出来
					$(".art-toast .ico-del").show();
				}
				$(".art-toast").on("click",".ico-del",function(){
					hideToast(options);
				});
			}
			$(".art-toast").show();
		}else{
			var htmlArr=['<div class="art-toast">'];
			htmlArr.push('<div class="toa-body">');
			htmlArr.push('<h3>'+options.msg+'</h3>');
			// htmlArr.push('<i class="ico-del">×</i>');
			htmlArr.push('</div></div>');
			$("body").append(htmlArr.join(""));
			if(options.close){
				setTimeout(function(){
					hideToast(options);
				},options.closeTime);
			}else{
				$(".toa-body").append('<i class="ico-del">×</i>');
				$(".art-toast").on("click",".ico-del",function(){
					hideToast(options);
				});
			}
		}
		if(options.icoCss){
			$(".art-toast .ico-del").css(options.icoCss);
		}else{
			$(".art-toast .ico-del").removeAttr("style");
		}
		if(options.dialogCss){
			$(".art-toast").css(options.dialogCss);
		}else{
			$(".art-toast").removeAttr("style");
		}
		if(options.bodyCss){
			$(".art-toast h3").css(options.bodyCss);
		}else{
			$(".art-toast h3").removeAttr("style");
		}
		var width=$(".art-toast").outerWidth(),height=$(".art-toast").outerHeight();
		// console.log("art-toast---width="+width+",height="+height);
		$(".art-toast").css({"marginTop":-height/2,"marginLeft":-width/2});
		// $(".art-toast").css("marginTop",sc);
		// return html;
	}

//关闭toast
	function hideToast(options){
		if(!options){
			options={};
		}
		if(!options.cover){
			hideCover();
		}
		$(".art-toast").fadeOut();
		if(options.callback){
			options.callback();
		}
	}
//关闭背景
	function showCover(){
		if($(".art-bg-cover").length>0){
			$(".art-bg-cover").fadeIn();
		}else{
			var htmlArr=['<div class="art-bg-cover"></div>'];
			$("body").append(htmlArr.join(""));
			$(".art-bg-cover").on("click",function(){
				hideCover();
			});
		}
		$("body").css({"overflow":"hidden"});
	}
// 显示背景
	function hideCover(){
		$(".art-bg-cover").fadeOut();
		$("body").css({"overflow":"auto"});
		if(Team777Dialog.curSelector){
			$(Team777Dialog.curSelector).fadeOut();
		}
	}

//显示确认弹窗
	function showConfirm(options){
		showCover();
		Team777Dialog.curSelector=".art-dialog";
		// var sc=$("body").scrollTop();
		$(".art-dialog").off("click",".btn-ok");
		$(".art-dialog").off("click",".btn-cancel");
		if($(".art-dialog").length>0){
			if(options.title){
				if($(".dia-head").length>0){
					$(".dia-head h3").html(options.title);
				}else{
					$(".dia-body").before('<div class="dia-head"><h3>'+options.title+'</h3></div>');
				}
			}else{
				$(".dia-head").remove();
			}
			if($(".art-dialog .ico-del").length<1){
				$(".art-dialog .dia-head").append('<i class="ico-del">×</i>');
			}else{
				//若需要主动关闭 存在就显示出来
				$(".art-dialog .ico-del").show();
			}
			$(".dia-body").html(options.msg);
			$(".art-dialog").on("click",".ico-del",function(){
				hideConfirm(options);
			});
			if($(".dia-foot .btn-cancel").length>0){
				if(options.cancel){//存在cancel按钮
					$(".dia-foot .btn-cancel").html(options.cancelTxt).show();
				}else{
					$(".dia-foot .btn-cancel").hide();
				}			
			}else{
				if(options.cancel){
					$(".dia-foot").append('<button class="btn-cancel" type="button">'+options.cancelTxt+'</button>');
				}
			}
			$(".art-dialog").on("click",".btn-cancel",function(){
				hideConfirm(options);
				options.cancelCall();
			});
			if($(".dia-foot .btn-ok").length>0){
				if(options.ok){//存在cancel按钮
					$(".dia-foot .btn-ok").html(options.okTxt).show();
				}else{
					$(".dia-foot .btn-ok").hide();
				}
			}else{
				if(options.ok){
					$(".dia-foot").append('<button class="btn-ok" type="button">'+options.okTxt+'</button>');
				}
			}
			$(".art-dialog").on("click",".btn-ok",function(){
				hideConfirm(options);
				options.okCall();
			});
			$(".art-dialog").show();
		}else{
			var htmlArr=['<div class="art-dialog">']
			if(options.title){
				htmlArr.push('<div class="dia-head">');
				htmlArr.push('<h3>'+options.title+'</h3>');
				if(options.close){
					htmlArr.push('<i class="ico-del">×</i>');
				}
				htmlArr.push('</div>');
			}
			htmlArr.push('<div class="dia-body">');
			htmlArr.push(options.msg);
			htmlArr.push('</div>');
			htmlArr.push('<div class="dia-foot">');
			htmlArr.push('</div>');
			htmlArr.push('</div>');
			$("body").append(htmlArr.join(""));
			if(options.cancel){//存在cancel按钮
				$(".dia-foot").append('<button class="btn-cancel" type="button">'+options.cancelTxt+'</button>');
				$(".art-dialog").on("click",".btn-cancel",function(){
					hideConfirm(options);
					options.cancelCall();
				});
			}
			if(options.close){
				$(".art-dialog").on("click",".ico-del",function(){
					hideConfirm(options);
				});
			}
			if(options.ok){//存在ok按钮
				$(".dia-foot").append('<button class="btn-ok" type="button">'+options.okTxt+'</button>');
				$(".art-dialog").on("click",".btn-ok",function(){
					hideConfirm(options);
					options.okCall();
				});
			}
		}
		
		var css={};
		if(options.css){
			for(var i in options.css){
				if(i=="height"){
					height=options.css[i];
					css[i]=options.css[i];
				}else if(i=="width"&&options.css[i]==true){
					css[i]=$(window).width()*0.7;					
				}else{
					css[i]=options.css[i];	
				}
			}
		}else{
			$(".art-dialog").removeAttr("style");
		}
		// css.marginTop=-height/2;
		// css.marginLeft=-width/2;
		$(".art-dialog").css(css);
		var width=$(".art-dialog").outerWidth(),height=$(".art-dialog").outerHeight();
		// console.log("art-dialog,width="+width+",height="+height+JSON.stringify(css));
		if(!css.marginTop){
			css.marginTop=-height/2;
		}
		css.marginLeft=-width/2;
		$(".art-dialog").css({"marginTop":css.marginTop,"marginLeft":css.marginLeft});
	}

//关闭确认弹窗
	function hideConfirm(options){
		if(!options){
			options={};
		}
		if(!options.cover){
			hideCover();			
		}
		$(".art-dialog").fadeOut();
	}

	win["Team777Dialog"]=Team777Dialog;
})(window);

 css:

/*对话框样式 start*/
.art-bg-cover{
	background:rgba(255,255,255,.8);
	position:fixed;
	width:100%;
	height:100%;
	top:0;
	left: 0;
	filter(opacity:.8);
	opacity:.8;
	z-index:1051;
}

.art-dialog{
	max-width:500px;
	/*width:450px;*/
	margin:0 auto;
	z-index:1052;
	position: fixed;
	_position:absolute;
	top:50%;
	left:50%;
	/*transform:translate(-50%,-50%);*/
	padding:0 25px;
	border-radius:10px;
	box-shadow: 1px 1px 15px 1px #8888C3;
	background:#fff;
	/*父类修复子类放大问题 导致子类的文字 内容锯齿化*/
	/*-webkit-transform:translateZ(-23px);*/
}
.art-dialog .dia-head{
	position:relative;
	/*height:50px;*/
	/*line-height:50px;*/

}
.art-dialog .dia-head .ico-del{
	position: absolute;
    right: -10px;
    top: 10px;
    cursor: pointer;
    background: #7a8da0;
    border-radius: 10px;
    width: 20px;
    height: 20px;
    line-height: 20px;
    color: #fff;
    text-align: center;
}
.art-dialog .dia-head h3{
	padding:20px 0;
	/*text-align:center;*/
	font-size: 18px;
	border-bottom:1px solid #eee;
}

.art-dialog .dia-body{
	padding:15px 0;
	color:#808080;
	font-size:14px;
}
.art-dialog .dia-body .editor-upload-btn{
    padding: 10px 30px;
    color: #808080;
    border: 1px solid #dcdcdc;
    font-size: 14px;
    border-radius: 5px;
}
.art-dialog .dia-body .editor-file-txt{
	padding: 8px 40px;
    margin: 5px 5px 5px 10px;
}

.art-dialog .dia-foot{
	text-align: center;
	padding:20px 0;
}

.art-dialog .dia-foot button{
	color:#808080;
	padding:15px 0;
	border: 1px solid #dcdcdc;
	font-size: 14px;
	border-radius:5px;
	width:148px;
	/*min-width:148px;*/
	overflow:hidden;
	white-space:nowrap;
	text-overflow:ellipsis;
	margin: 0 10px;
}

.art-toast{
	max-width:500px;
	margin:0 auto;
	z-index:1052;
	position: fixed;
	_position:absolute;
	top:50%;
	left:50%;
	/*transform:translate(-50%,-50%);*/
	padding:0 25px;
	border-radius:10px;
	box-shadow: 1px 1px 15px 1px #8888C3;
	background:#000;
	text-align:center;
}
.art-toast .toa-body{
	position: relative;
}
.art-toast .toa-body h3{
	padding:20px 10px;
	color:#fff;
	font-size:14px;
}

.art-toast .toa-body .ico-del{
	position: absolute;
	right:-15px;
	top:5px;
	color:#fff;
	cursor:pointer;
}
/*对话框样式 end*/

 

 

使用方式：

Team777Dialog.toast("")  或  Team777Dialog.toast(msg)    

msg={

close:true,//是否自动关闭窗口 true为自动 false为不自动手动关闭

closeTime:1000,//自动关闭窗口时间  默认1000ms 关闭

msg:"toast消息提示窗！", //消息提示消息

css:{"background":"#000",color:"#fff",width:"auto"},

callback:function(){

if(console){

console.log("消息提示消息");

}

}

}

Team777Dialog.confirm(msg):  

msg={

title:"确认窗口",//窗口标题

msg:"config消息提示窗！", //消息提示消息

close:false,//默认不显示关闭

ok:true,//是否显示OK按钮

okTxt:"Ok",//oK按钮文字

cancel:true,//是否显示取消按钮

cancelTxt:"Cancel",//取消按钮文字

cancelCall:function(){

if(console){

console.log("取消按钮消息");

}

},

okCall:function(){

if(console){

console.log("确认按钮消息");

}

}

}