封装js组件之消息弹窗插件，确认弹窗插件（demo案例）

发布时间：2019-09-26作者：laosun阅读（2572）

自己动手封装js组件之弹窗插件（demo案例）。内含message 消息提醒弹窗、confirm确认弹窗，弹窗输入备注进行下一步，确认弹窗后需要等待N秒后才能点击确定按钮。

博主第一次封装js组件，因为自己的后台有个地方需要用到，所以就做了一套，可是花了博主整整一天的时间。现在公布出来，供大家玩耍。

该插件主要是弹窗，该弹窗分为四种类型：

普通消息弹窗，只有一个确定按钮。
确认消息弹窗，有取消和确定按钮。
确认消息弹窗，必须输入内容才可进行下一步。
确认消息弹窗，确定按钮有倒计时。

回调方法详解，一共有四种，如下所示：

# 异常提醒，使用案例：回调过来以后，自己可以使用任何插件来进行 《弱提醒》
error:function(){},
#打开弹窗之前的回调，使用案例：弹窗中的内容需要请求后台才可以。
openBefore:function(){return true},
#关闭之后的提醒，使用案例：关闭之后刷新当前页...
afterClose:function(){},
#点击确定后的回调，使用案例：是否删除，点击是，从这请求后台。
callback:function(){},

默认参数详解：

timehwnd:null,
type:'confirm',//message、confirm、confirm-wait、confirm-apply-remark，默认值message
maskClose:true,//点击遮罩关闭弹窗，默认true（如果设置为false，那么只能点击取消或者确定按钮才可关闭）
title:'温馨提示',//弹窗标题
bodyClass:'',//默认为空,如果想要将body区域增加样式，从这进行修改（博主预览图中的红色字体等就是通过这个来设置的）
body:'您确定要执行吗？',//弹窗内容
placeholder:'',//只有confirm-apply_remark才有 （这个是textarea的）
width:300,//默认弹窗宽度
height:'auto',//默认弹窗高度（这个高度是中间内容区域的高度，如果要计算这个弹窗高度，需要增加顶部和尾部的95px + padding:20的40px）（如果使用confirm-apply-remark，建议设置此值）
minWidth:300,//最小宽度
minHeight:24,//最小高度
maxWidth:1000,//最小宽度
maxHeight:500,//最大高度
remarkMinLength:0,//默认为0，表示textarea备注至少输入多少个字。 填写0，表示可以为空
countdownSecond:5,//倒计时，默认五秒倒计时
#上边的所介绍的四种回调，这里就不再说了
error:function(){},
openBefore:function(){return true},
afterClose:function(){},
callback:function(){},

博主并不是专攻 js 的程序员，而是后端。做的不好的地方，可以留言告诉博主，互相交流互相学习。

下边来看下预览图：

源码：

demo.html

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,user-scalable=no">
<title>alert弹窗</title>
</head>
<link href='animate.min.css' rel='stylesheet' type='text/css'>
<link href='sunalert.min.css' rel='stylesheet' type='text/css'>
<body>
<!-- 页面 -->
<style>
.btns{text-align: center;margin-bottom: 20px;}
.btns a{ margin: 20px; }
</style>
<div class="btns">
	<a href="javascript:;" id="sunalert-message">普通消息展示弹窗(仅仅展示)</a>
	<a href="javascript:;" id="sunalert-confirm" reloadUrl="http://www.baidu.com">确认消息弹窗(confirm)</a>
</div>
<div class="btns">
	<a href="javascript:;" id="confirm-apply-remark">确认消息(输入内容)</a>
	<a href="javascript:;" id="confirm-wait">确定消息弹窗(按钮倒计时等待)</a>
</div>
<div class="btns">
	<a href="javascript:;" id="sunalert-confirm1" reloadUrl="http://www.sunjs.com">练习Demo1</a>
	<a href="javascript:;" id="sunalert-confirm2">练习Demo2（批量导出）</a>
	<a href="javascript:batchUnBindCallBack();;">练习Demo3（直接弹出）</a>
	<span id="demo1"></span>
</div>

<!-- 正文 -->
<script src="jquery-2.1.4.min.js"></script>
<script type='text/javascript' src='sunalert.js'></script>
<style>
.body-ext{
	color: red!important;
}
</style>
<script type="text/javascript">
	$(document).ready(function() {
		//message 普通消息 弹窗
		$("#sunalert-message").SunAlert({
			type:'message',//message、confirm、confirm-wait、confirm-apply-remark，默认值message
			maskClose:true,//点击遮罩关闭弹窗，默认true
			title:'温馨提示',//弹窗标题，默认为温馨提示
			body:'操作已成功',//弹窗内容，默认内容：您确定要执行吗？
			callback:function(_this, id){
				console.log(id+"	点击了确定");
			}
		})[0];
		//confirm 确认消息 弹窗
		$("#sunalert-confirm").SunAlert({
			type:'confirm',//message、confirm、confirm-wait、confirm-apply-remark，默认值message
			title:'温馨提示',//弹窗标题
			openBefore:function(_this, id){
				//TODO 请求 ajax 获取批次详情
				var body = "本批次共绑定数据1000条，已被解绑23条<br/><br/><font style='color:red'>请已实际解绑结果为准</font>";
				//打开之前更新弹窗内容
				_this.update({
					body:body
				});
				console.log(id+"	打开弹窗之前");
				return true;
			},
			afterClose:function(_this, id){
				console.log(id+"	点击了取消");
			},
			callback:function(_this, id){
				var url = $("#"+id).attr("reloadUrl");
				console.log(id+"	点击了确定，准备请求 "+url+" 准备批量解绑");
			}
		})[0];
		//confirm 输入内容进行下一步 确认消息 弹窗
		$("#confirm-apply-remark").SunAlert({
			type:'confirm-apply-remark',//message、confirm、confirm-wait、confirm-apply-remark，默认值message
			maskClose:true,//点击遮罩关闭弹窗，默认true
			title:'锁定',//弹窗标题，默认为温馨提示
			width:450,
			height:100,//confirm-apply-remark类型，最好设置个高度，支撑textarea
			placeholder:'锁定原因',//只有confirm-apply-remark才有
			remarkMinLength:5,//只有confirm-apply-remark才有，填写0，表示可以为空
			error:function(msg){
				alert(msg);
			},
			openBefore:function(_this, id){
				console.log(id+"	打开弹窗之前");
				return true;
			},
			afterClose:function(_this, id){
				console.log(id+"	点击了取消");
			},
			callback:function(_this, id, value){
				console.log(id+"	点击了确定，输入的内容是："+value);
			}
		})[0];
		//确定按钮五秒倒计时
		$("#confirm-wait").SunAlert({
			type:'confirm-wait',//message、confirm、confirm-wait、confirm-apply-remark，默认值message
			maskClose:false,//点击遮罩关闭弹窗，默认true
			title:'批量删除',//弹窗标题，默认为温馨提示
			body:'<strong>您确定要批量删除吗？</strong><br/><br/><font color="red">本次删除后数据将可能无法找回，您确定要继续执行吗？</font><br/><br/>先给你3秒钟时间冷静一下吧',
			width:400,
			countdownSecond:3,//3秒倒计时，倒计时完成后，才能点击确定按钮
			callback:function(_this, id, value){
				console.log(id+"	倒计时结束，点击了确定");
			}
		})[0];


		//====================练习demo====================================================================
		//confirm 确认消息 弹窗
		$("#sunalert-confirm1").SunAlert({
			type:'confirm',//message、confirm、confirm-wait、confirm-apply-remark，默认值message
			title:'温馨提示',//弹窗标题
			openBefore:function(_this, id){
				//TODO 请求 ajax 获取批次详情

				//例子demo
				// var isReturn = false;
				// requestTo(url, params, function(result){//封装好的ajax请求。 等同$.post
				// 	if(result.code=='0'){
				// 		var body = result.msg;
				// 		_this.update({
				// 			body:body
				// 		});
				// 		isReturn = true;
				// 		return false;
				// 	}else{
				// 		$("body").SunAlert({
				// 			width:400,
				// 			type:'message',//message、confirm、confirm-wait、confirm-apply-remark，默认值message
				// 			body:result.msg
				// 		})[0].open("sunalert-validate");
				// 		return false;
				// 	}
				// });
				// return isReturn;

				var body = "本批次共绑定数据1000条，已被解绑23条<br/><br/><font style='color:red'>请已实际解绑结果为准</font>";
				//打开之前更新弹窗内容
				_this.update({
					body:body
				});
				console.log(id+"	打开弹窗之前");
				return true;
			},
			afterClose:function(_this, id){
				console.log(id+"	点击了取消");
			},
			callback:function(_this, id){
				var url = $("#"+id).attr("reloadUrl");
				console.log(id+"	点击了确定，准备请求 "+url+" 准备批量解绑");
				if( typeof batchUnBindCallBack === 'function' ){//如果存在回调的方法，则进行回调弹窗提醒
					batchUnBindCallBack();
				}
			}
		})[0];


		//confirm 确认消息 弹窗
		$("#sunalert-confirm2").SunAlert({
			type:'confirm',//message、confirm、confirm-wait、confirm-apply-remark，默认值message
			title:'导出XXX',//弹窗标题
			body:'注：本次操作将会压缩成zip格式',
			callback:function(_this, id){
				//TODO 提取选中的checkbox id等等操作
				var ids = "1,2,3,4,5";
				console.log(_this.id+"	点击了确定，准备开始导出："+ids);
				//TODO 请求后台
				if( typeof exportCallBack === 'function' ){//如果存在回调的方法，则进行回调弹窗提醒
					exportCallBack(ids);
				}
			}
		})[0];
	});
	
	//回调
	function exportCallBack(ids){
		var aa = $("body").SunAlert({
			type:'confirm',//message、confirm、confirm-wait、confirm-apply-remark，默认值message
			maskClose:true,//点击遮罩关闭弹窗，默认true
			title:'温馨提示',//弹窗标题，默认为温馨提示
			body:'打包已成功，是否跳转到下载页面？'+ids,//弹窗内容，默认内容：您确定要执行吗？
			callback:function(_this, id){
				location.href = 'https://www.sunjs.com';
			}
		})[0].open("bbbbb");
	}
	
	//回调
	function batchUnBindCallBack(){
		var aa = $("body").SunAlert({
			type:'message',//message、confirm、confirm-wait、confirm-apply-remark，默认值message
			maskClose:true,//点击遮罩关闭弹窗，默认true
			title:'温馨提示',//弹窗标题，默认为温馨提示
			body:'操作已成功',//弹窗内容，默认内容：您确定要执行吗？
			callback:function(_this, id){
				console.log(_this.id+"	本次demo测试已经结束");
				//_this.destroy();
			}
		})[0];
		aa.open("aaaaaaaaa");
	}
</script>
</body>
</html>

底部有下载地址