jQuery-自己封装的弹框

最新推荐文章于 2025-05-20 14:48:03 发布

weixin_33995481

最新推荐文章于 2025-05-20 14:48:03 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/weilizou/p/10904640.html

博客介绍了JavaScript事件函数的调用方式，包括直接调用，以及jQuery的点击调用。还给出了转载来源。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >


(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">&#10006</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执行完毕后

调用:

　　js事件函数直接调用

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('aa')
            },err=>{
                return
            })
        })
    })
</script>

jQuery点击调用