发布时间: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>
底部有下载地址
版权属于: 技术客
原文地址: https://www.sunjs.com/article/detail/19a7e981a4cc4c1e9af68ed4e18977e7.html
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
下载资源可能涉及版权问题,下载赶早,删档不补