jquery使用案例——Sweetalert.js实现用户体验良好的弹窗提醒

当项目中提醒弹窗使用较多且要求较高时，可以使用该库，提供了丰富的api，可以方便的通过设置参数实现需求，美观，支持响应式。

---

/*
在wordpress项目中通过sweetalert.js实现简单的资源下载权限控制需求
*/
//引入库文件


...

    

            ID."\" data-nonce=\"".wp_create_nonce('tt_post_download_nonce')."\">
            

                点击下载
                VIP专享设计资源
            
            
        ";
            } else {
                echo "ID."\" data-nonce=\"".wp_create_nonce('tt_post_download_nonce')."\">
        

            点击下载
            免费设计资源
        
        
    ";
            }
            ?>
        
    

//javascript部分，为下载按钮点击事件绑定的 javascript函数
function download_swal() {
    is_vip();
        if ($dl_info_arr['dl_is_free'] == "0" && !$is_vip){
    ?>
    swal({
            title: "无法下载",
            text: "该资源仅限VIP用户下载，是否充值VIP?",
            type: "warning",
            showCancelButton: true,
            cancelButtonText: "取消",
            confirmButtonColor: "#DD6B55",
            confirmButtonText: "去充值",
            closeOnConfirm: false,
            allowOutsideClick:true
        },
        //回调函数，这里跳转到下载页面  
        function(){
            location.href="";
        });
    
    swal({
            title: "",
            text: "请前往下载页面输入密码下载！",
            type: "success",
            showCancelButton: true,
            cancelButtonText: "取消",
            confirmButtonColor: "#DD6B55",
            confirmButtonText: "前往下载",
            closeOnConfirm: false,
            allowOutsideClick:true
        },
        //回调函数，这里调用javascript函数通过ajax调用接口将下载记录写入数据库  
        function(){
            _postdownload($(".btn-download"));

        });
    
}

效果图1

效果图2