悠悠楠杉
网站页面
(function () {
CDK={
cfm:function(resFun,errFun){
var confirm=document.createElement('div');
confirm.setAttribute('style','position:fixed;top:0;left:0;width: 100%;height: 100%;z-index:99;background-color: rgba(0, 0, 0,0.3);');
$(confirm).addClass('confirmkuang');
$(confirm).html(
'<div class="addson" style="opacity:0;position:fixed;top:40%;left:40%;z-index: 9999;min-width:260px;max-width:260px;min-height:100px;margin:auto;background:#fff;border-radius:2px;color: #000;-moz-box-shadow:0px 0px 14px #858585; -webkit-box-shadow:0px 0px 14px #858585; box-shadow:0px 0px 14px #858585;"><div style="padding: 0 80px 0 20px;height: 42px;line-height: 42px;border-bottom: 1px solid #eee;font-size: 14px;color: #333;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;background-color: #F8F8F8;border-radius: 2px 2px 0 0;position: relative;">提示框<span style="position: absolute;right: 15px;font-size: 15px;cursor:pointer;" class="closealter">✖</span></div><p style="padding:10px;word-break: break-all; overflow: hidden; font-size: 16px;overflow-x: hidden;overflow-y: auto;">确定要执行此操作吗?</p><div style="text-align: right;padding: 0 15px 12px;"><button style="border-color: #1E9FFF;background-color: #1E9FFF;color: #fff;height: 28px;line-height: 28px;margin: 5px 5px 0;padding: 0 15px;border: 1px solid #dedede;border-radius:3px;font-weight: 400;cursor: pointer;text-decoration: none;" class="closealter addConfirm">确认</button><button style="height: 28px;line-height: 28px;margin: 5px 5px 0;padding: 0 15px;border: 1px solid #dedede;background-color: #fff;color: #333;border-radius:3px;font-weight: 400;cursor: pointer;text-decoration: none;" class="closealter">取消</button></div></div>'
)
$("body").append(confirm);
$('.addson').animate({'opacity':'1'},400)
$('.addConfirm').on('click',function(){
if (resFun){
resFun();
}
})
$('.closealter').on('click',function(event){
$('.addson').animate({'opacity':'0'},400)
setTimeout(function(){
$('.confirmkuang').remove()
},400)
})
}
}
})(jQuery);//(jQuery)代表jQuery执行完毕后
调用:
CDK.cfm(res=>{
console.log('确认执行')
},err=>{
console.log('取消执行')
})
<button class="trigger">弹框</button>
<script type="text/javascript">
$(function(){
$('.trigger').on('click',function(){
CDK.cfm(res=>{
console.log('确认执行')
},err=>{
console.log('取消执行')
})
})
})
</script>
效果: