SweetAlert 常用示例

alert("哎呦……出错了！");

swal("这是一条信息！");

swal("这是一条信息！", "很漂亮，不是吗？");

swal("干得漂亮！", "你点击了按钮！","success")

swal({
        title: "确定删除吗？",
        text: "你将无法恢复该虚拟文件！",
        type: "warning",
        showCancelButton: true,
        confirmButtonColor: "#DD6B55",
        confirmButtonText: "确定删除！",
        closeOnConfirm: false
    },
    function () {
        swal("删除！", "你的虚拟文件已经被删除。", "success");
    }
);

swal({
        title: "确定删除吗？",
        text: "你将无法恢复该虚拟文件！",
        type: "warning",
        showCancelButton: true,
        confirmButtonColor: "#DD6B55",
        confirmButtonText: "确定删除！",
        cancelButtonText: "取消删除！",
        closeOnConfirm: false,
        closeOnCancel: false
    },
    function (isConfirm) {
        if (isConfirm) {
            swal("删除！", "你的虚拟文件已经被删除。", "success");
        } else {
            swal("取消！", "你的虚拟文件是安全的:)", "error");
        }
    }
);

swal({
    title: "漂亮！",
    text: "这是自定义图标。",
    imageUrl: "images/thumbs-up.jpg"
});

swal({
    title: "HTML <small>标题</small>!",
    text: "自定义<span style="color: #F8BB86">html<span>信息。",
    html: true
});

swal({
    title: "自动关闭弹窗！",
    text: "2秒后自动关闭。",
    timer: 2000,
    showConfirmButton: false
});

swal({
        title: "输入！",
        text: "输入一些有趣的话：",
        type: "input",
        showCancelButton: true,
        closeOnConfirm: false,
        animation: "slide-from-top",
        inputPlaceholder: "输入一些话"
    },
    function (inputValue) {
        if (inputValue === false) return false;

        if (inputValue === "") {
            swal.showInputError("你需要输入一些话！");
            return false
        }

        swal("非常好！", "你输入了：" + inputValue, "success");
    }
);

$(document).on('click', 'a[rel=play-time-add]', function () {
    var user_id = this.data('id');
    
    var text = '<fieldset><input tabindex="3" id="play_time_add_num" placeholder="请输入要增加的娱乐数" type="text" style="display:block">\n'
        +'<input tabindex="4" id="play_time_add_remark" placeholder="请输入备注" type="text" style="display:block"></fieldset>\n'
        +'<div class="class_del_error hide" style="background-color: #f1f1f1;margin-left: -17px;margin-right: -17px;overflow: hidden;padding: 10px 0;">\n'
        +'<div style="display: inline-block;width: 24px;height: 24px;border-radius: 50%;background-color: #ea7d7d;color: white;line-height: 24px;text-align: center;margin-right: 3px;">!</div>\n'
        +'<p style="display: inline-block;color: #797979;font-size: 14px;font-weight: 300;position: relative;text-align: inherit;float: none;margin: 0;padding: 0;line-height: normal;"></p> </div>';

    swal({
        title: "用户增加娱乐数",
        text: text,
        html: true,
        confirmButtonText:"确认",
        cancelButtonText:"取消",
        showCancelButton:true,
        closeOnConfirm:false,
    }, function () {
        var num = $('.sweet-alert  #play_time_add_num').val();
        var play_time_add_remark = $('.sweet-alert  #play_time_add_remark').val();

        if ( num === false || num === "" ) {
            class_del_error_show( "请填写课时数!" );
            return false;
        }
        var pattern = /^\+?[0-9]*$/;
        if ( !pattern.test(num ) || num < 1 ) {
            class_del_error_show( "课时数必须为正整数!" );
            return false;
        }
        if (play_time_add_remark === false || play_time_add_remark === "") {
            class_del_error_show( "请输入备注!" );
            return false;
        }

        $.post("/play/playtime-add", {'user_id': user_id, 'num': num, 'remark':play_time_add_remark}, function (res) {
            if ( res.code == 200 ) {
                sweetAlert("成功!", "该用户娱乐数增加成功", "success");
            } else {
                class_del_error_show( res.msg );
                return false;
            }
        }, 'json');
    });
});


function class_del_error_show( msg ) {
    $('.sweet-alert .class_del_error').removeClass("hide");
    $('.sweet-alert .class_del_error').addClass("show");
    $('.sweet-alert .class_del_error p').text( msg );
};

swal({
        title: "Ajax请求示例",
        text: "提交运行ajax请求",
        type: "info",
        showCancelButton: true,
        closeOnConfirm: false,
        showLoaderOnConfirm: true,
    },
    function () {
        setTimeout(function () {
            swal("Ajax请求完成！");
        }, 2000);
    }
);

<link rel="stylesheet" type="text/css" href="dist/sweetalert.css">
<link rel="stylesheet" type="text/css" href="themes/twitter.css">

<script src="dist/sweetalert.min.js"></script> 
<link rel="stylesheet" type="text/css" href="dist/sweetalert.css">

swal({
    title: "Error!",
    text: "Here's my error message!",
    type: "error",
    confirmButtonText: "Cool"
});