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

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

/*
在wordpress项目中通过sweetalert.js实现简单的资源下载权限控制需求
*/
//引入库文件
<link.../>
<script ...></script>
...
<?php if(!is_null($dl_info_arr['dl_is_free'])&&$dl_info_arr['dl_is_free']!= "-1"){?>
    <div class="widget download">
            <?php
            if ($dl_info_arr['dl_is_free'] == "0"){
                echo "<a id=\"btn-download\" class=\"btn btn-lg btn-info btn-download\" data-post-id=\"".$postdata->ID."\" data-nonce=\"".wp_create_nonce('tt_post_download_nonce')."\">
            <p>
                <span style=\"display: block;font-size: 22px;\">点击下载</span>
                <span style=\"font-size: 14px;\">VIP专享设计资源</span>
            </p>
            <i class=\"iconfont icon-vipffb400\"></i>
        </a>";
            } else {
                echo "<a id=\"btn-download\" class=\"btn btn-lg btn-success btn-download\" data-post-id=\"".$postdata->ID."\" data-nonce=\"".wp_create_nonce('tt_post_download_nonce')."\">
        <p>
            <span style=\"display: block;font-size: 22px;\">点击下载</span>
            <span style=\"font-size: 14px;\">免费设计资源</span>
        </p>
        <i class=\"iconfont icon-xiazai\"></i>
    </a>";
            }
            ?>
        </a>
    </div>
<?php } ?>
//javascript部分，为下载按钮点击事件绑定的 javascript函数
function download_swal() {
    <?php
        $member = new Member(get_current_user_id());
        $is_vip = $member->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="<?php echo tt_url_for('go_vip'); ?>";
        });
    <?php }else{?>
    swal({
            title: "<?php if (empty($dl_info_arr['dl_password'])){echo "无密码";}else{echo "密码为:".$dl_info_arr['dl_password'];}?>",
            text: "请前往下载页面输入密码下载！",
            type: "success",
            showCancelButton: true,
            cancelButtonText: "取消",
            confirmButtonColor: "#DD6B55",
            confirmButtonText: "前往下载",
            closeOnConfirm: false,
            allowOutsideClick:true
        },
        //回调函数，这里调用javascript函数通过ajax调用接口将下载记录写入数据库  
        function(){
            _postdownload($(".btn-download"));

        });
    <?php } ?>
}

效果图1

效果图2