封装js组件 之 消息弹窗插件，确认弹窗插件（demo案例）
发布时间：2019-09-26作者：laosun阅读（2399）
自己动手封装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>底部有下载地址
0 +1
版权声明
版权属于: 技术客
原文地址: https://www.sunjs.com/article/detail/19a7e981a4cc4c1e9af68ed4e18977e7.html
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
下载资源可能涉及版权问题，下载赶早，删档不补
共 4 条评论