`

简单的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("确认按钮消息");

}

}

}    

 

分享到：
| 简单数字键盘
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    基于jQuery的图片点击弹窗预览大图插件，jquery.fancybox-1.3.4

    jQuery Fancybox插件就是这样一个解决方案，它为网页中的图片提供了点击弹窗预览的功能，让图片展示变得既美观又便捷。本篇文章将详细介绍基于jQuery的Fancybox 1.3.4版本的使用方法和核心特性。 **一、jQuery与...

    toast.js提示弹窗

    toast.js提示弹窗

    jquery弹窗提示插件

    首先，让我们来理解jQuery弹窗提示插件的基本概念。这些插件是用来增强网站用户体验的工具，它们可以在用户进行特定操作时提供视觉反馈，比如通知、确认、询问或者引导。常见的弹窗类型有以下几种： 1. **Toast**：...

    jQuery弹窗放大图片展示插件

    jQuery弹窗放大图片展示插件是一种常见的网页交互功能，它允许用户在点击图片后以弹出窗口的形式查看图片的放大版本，通常用于相册展示或任何需要详细查看图片的场景。这种插件利用了jQuery库的强大功能，简化了...

    spotlight全屏弹窗图片幻灯片插件.zip

    "Spotlight全屏弹窗图片幻灯片插件"是一个专为网站设计的交互式功能组件，用于在全屏模式下展示图片轮播效果。这个插件能够吸引用户的注意力，增强用户体验，尤其适用于产品展示、摄影网站或者任何需要强调视觉元素...

    jQuery点击弹窗图片放大预览查看.zip

    本项目“jQuery点击弹窗图片放大预览查看”是针对网页图片预览的一种实现，旨在提供一个用户友好的界面，增强图片浏览体验。下面将详细介绍这个插件的工作原理和实现方式。 首先，jQuery点击弹窗图片预览功能的核心...

    图片预览插件 viewer

    【图片预览插件 viewer】是一种在网页应用中实现图片快速预览功能的工具，它允许用户无需下载或打开原始大图即可查看图片内容。在网页设计和开发中，这样的插件是至关重要的，因为它提供了方便、高效且用户体验良好...

    图片弹窗显示大图JS代码

    同时，`lighter`目录可能包含实现弹窗效果的JS库，比如Lightbox，它是一个流行的图片弹窗插件，提供了良好的图片预览体验。使用Lightbox或者其他类似的库，可以简化代码并增强用户体验，例如添加平滑的过渡效果、...

    微信小程序带图片弹窗简单实现

    怎样实现一个带图片显示的模态视图弹窗呢？有时候我们的确有这个需求，自己实现？不不不，哪有官方的方便！ 下面我来介绍一种使用官方组件就能实现的方法： 首先找到官方文档：​显示模态弹窗的API wx.showModal...

    Msbox(基于Jquery的弹窗提示插件)

    * 主要实现自定义弹窗提示效果：成功提示、警告提示、错误提示、询问提示、消息提示五种提示效果 * @name Msbox * @author ChenZhen || Lonely * @version 1.0 * @copyright (c) 2013 ChenZhen * @本插件免费...

    H5弹窗提示各种例子

    其中，弹窗提示是用户界面中常见的交互元素，用于向用户显示信息、确认操作或者警告。本资料包“H5弹窗提示各种例子”提供了一系列美观且功能多样的弹窗设计示例，适用于希望提升用户体验的开发者。 首先，我们来...

    一款精美方便的弹窗alert插件

    通过简单的API调用，开发者可以快速创建出具有不同样式和功能的弹窗，如警告、确认、输入框等，且支持自定义按钮、图标、标题和文本内容。 例如，就像描述中提到的，调用SweetAlert只需要一行代码： ```javascript ...

    android，Toast弹窗

    在标题“android，Toast弹窗”和描述“android Toast弹窗位置，以及图片和文字一起弹出”中，我们可以探讨如何自定义`Toast`的位置以及如何在`Toast`中同时展示图片和文字。 首先，我们了解`Toast`的基本用法。在...

    一个简单大方的弹窗插件

    - `images`：存放与插件相关的图片资源，可能包括预览图、示例图片等。 - `lib`：库文件夹，可能包含了插件的核心代码和其他依赖库。 综合这些文件，我们可以了解到这个弹窗插件的实现和使用方式，开发者可以通过`...

    自定义提示、确认弹窗

    在IT行业中，自定义提示和确认弹窗是用户体验设计中不可或缺的部分。这些组件通常用于向用户显示重要信息，请求确认操作，或者在执行特定任务前提供反馈。在本篇文章中，我们将深入探讨如何使用JavaScript来实现这样...

    JQUERY响应式弹窗图片以及放大插件支持拟态窗口.zip

    本资源“JQUERY响应式弹窗图片以及放大插件支持拟态窗口.zip”是针对网页中图片展示的一个解决方案，特别适合那些需要在网页中实现高质量图片预览和放大功能的开发者。 首先，我们要理解什么是响应式设计。响应式...

    jQuery点击弹窗图片放大查看插件.zip

    jQuery点击弹窗图片放大查看插件是一个非常实用的前端开发工具，它利用jQuery库的高效性和易用性，为用户提供了一种便捷的方式来展示和查看网页中的大图。这个插件适用于那些希望在用户点击小图时能够弹出一个窗口...

    基于jquery的图片弹窗预览插件

    **基于jQuery的图片弹窗预览插件：fancyPic** 在Web开发中，图片预览功能是一项常用且重要的需求，特别是在用户需要查看大图或者多图时。jQuery作为一个轻量级、高性能的JavaScript库，提供了丰富的插件来简化此类...

    仿照安卓Toast 弹窗提示

    在本教程中，我们将探讨如何在iOS应用中仿照Android的Toast功能，实现一个自定义的弹窗提示。 首先，我们需要了解iOS中的UI视图层次和生命周期。在iOS中，我们可以使用UIView类来创建和管理自定义视图。为了模仿...

    jq弹窗各种效果插件

    "jq弹窗各种效果插件"这个主题涉及到的是使用jQuery来实现各种弹出窗口（也称为模态对话框或提示框）的插件和效果。在网页设计中，弹窗常用于用户通知、确认操作、展示详细信息或进行表单输入等场景。 首先，我们要...

Magicbox
Global site tag (gtag.js) - Google Analytics