jQuery⽤户确认框弹窗插件（⾃写）
jQuery⽤户确认框弹窗插件（⾃写）
编写起因
vbs表白心形脚本作为⼀个前端开发者，⽤户经常会遇到确定和删除选择，当你使⽤comfirm（）时，虽然能实现功能，但丑陋的弹窗极⼤程度影响了⽤户体验，所以编写了⼀个⽤户框弹窗插件。
原理以及效果
运⽤d（）⽅法在原型上定义⽅法
可以通过CSS⾃⾏进⾏美化
使⽤⽅法
(此插件依赖jQuery，所以你需要去下载⼀个jQuery，并导⼊)
标签可以随意定义，标签ID要⼀致
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title></title>
<script src="js/jquery-1.11.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/showa.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="css/tishibox.css"/>
</head>
<body>
<a id="shoa_btn">点击</a>
<p id="shoa_ts">是否要删除该信息</p>//此处填写提⽰的信息
</body>
</html>
<script type="text/javascript">
$(function(){
$("#shoa_btn").tishibox(function(){
console.log("确定代码在这⾥编写")
},function(){
console.log("取消代码在这⾥编写")
});
})
</script>
tishibox.css代码
可改变代码⾃⾏美化界⾯
*{margin:0;padding:0;}软件测试面试题汇总
body,html{background: white;width:100%;height:100%;}
#shoa_bigbox{width:100%;height:100%;background:rgba(0,0,0,0.3);position: fixed;top:0;left:0;z-index:5000;overflow: hidden;}
#shoa_box{width:400px;height:300px;background: white;position: fixed;left:50%;top:50%;margin-left:-200px;margin-top:-150px;}
#shoa_span{width:400px;height:50px;line-height:50px;background: #CCC;display: block;padding:02
0px;font-size:14px;box-sizing: border-box;}
#shoa_close{float: right;font-style: normal;font-size:12px;display: block;width:20px;height:20px;line-height:20px;cursor: pointer;margin-top:15px;}
#shoa_content{width:100%;height:250px;box-sizing: border-box;padding:20px 0;}
jquery下载文件插件#shoa_content p{width:100%;height:150px;border-bottom:1px solid #CCCCCC;font-size:25px;line-height:150px;text-align: center;color:red}
#shoa_content a{display: block;width:100px;height:50px;cursor: pointer;background: red;color: white;font-size:20px;text-align: center;line-height:50px;f loat: left;margin:15px 0060px;}
#shoa_content #show_qx{background: #CCCCCC;color: red;}
#shoa_btn{display: block;width:100px;height:50px;background: #CCCCCC;cursor: pointer;text-align: center;color: red;line-height:50px;} showa.js代码
$(function(){
d({
tishibox:function(resolve,reject){
this.click(function(){
//动态⽣成弹框
$("body").append(`
<div id="shoa_bigbox">
<div id="shoa_box">
<span id="shoa_span">
是否操作
<i id="shoa_close">X</i>
</span>
<div id="shoa_content">
<p>${$("#shoa_ts").text()}</p>
<a id="showa_qr">确定</a>
<a id="showa_qx">取消</a>
</div>
</div>
</div>`);
$("#shoa_bigbox").hide().fadeIn(500);
})
//运⽤事件委托保持点击事件有效性
$(document).on("click","#shoa_span",function(){
$("#shoa_bigbox").fadeOut(500,function(){
springboot最常用的25个注解$("#shoa_bigbox").remove();
});
})
$(document).on("click","#showa_qx",function(){
if(reject){
reject();
}
$("#shoa_bigbox").fadeOut(500,function(){
$("#shoa_bigbox").remove();
});
})一键生成小程序模板
$(document).on("click","#showa_qr",function(){
if(resolve){
resolve();
}
$("#shoa_bigbox").fadeOut(500,function(){
$("#shoa_bigbox").remove();
});阿司匹林肠溶片用量
})
}
})
})
将代码导⼊成功后，即可实现效果，如有疑问可以评论哦~ PS：个⼈原创，未经本⼈允许不可转载

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。