sweetalert-demo

bootstrap & sweetalert demo

---

项目地址

• 官网地址：http://t4t5.github.io/sweetalert/
• 中文网址：http://sweetalert.getmaterialize.com/

基本用法

文档里面已经讲得十分详细，不过刚使用时没仔细看不知道怎样响应取消的点击事件 看下面这个例子，第9行通过isConfirm来判断是否保存还是取消，只需判断一下就可以了

swal({
    title: "",
    text: "卡片描述尚未保存，请选择保存或者取消",
    type: "warning",
    showCancelButton: true,
    confirmButtonText: "保存",
    confirmButtonColor: "#5cb85c",
    cancelButtonText: "取消",
    }, function (isConfirm) {
        if (isConfirm) {
            alert("save");
        } else {
            alert("cancel");
        }
})      

样式修改

看上面这张图，保存是在左边的。原项目和这个相反，通过css可以简单的改变位置

//使用css3的flex属性
.sa-button-container{
    display: flex;
    display: -webkit-flex;
    justify-content: center;
    flex-direction: row-reverse;
}

其他地方修改了圆角和按钮字体的大小

Bootstrap模态框结合使用

在使用Bootstrap模态框做表单提交时，为防止用户不小心关掉模态框导致内容丢失，我们可以在触发模态框关闭事件时判断用户是否输入新的内容。如果输入了新的内容，则弹出sweetalert对话框，提示用户保存信息。

var input_val_before="";
$(function(){
    $('#myModal').on('hide.bs.modal', function (e) {
        var input_val=$("#myInput").val().trim();  
        if(input_val_before!=input_val){
            e.preventDefault();
            swal({
                title: "",
                text: "编辑框内容尚未保存，请选择保存或者取消",
                type: "warning",
                allowEscapeKey:false,
                showCancelButton: true,
                confirmButtonText: "保存",
                confirmButtonColor: "#5cb85c",
                cancelButtonText: "取消"
            }, function (isConfirm) {
                if (isConfirm) {
                    input_val_before=input_val;
                    //执行保存操作...
                } else {
                    $("#myInput").val(input_val_before);
                    //执行取消操作...
                }
                $("#myModal").modal("hide");
            });
        }
    });
});

先定义一个全局变量input_val_before用来保存输入框内容，在模态框触发关闭事件的时候判断一下此时输入框的内容是否发生改变。如果没有改变，通过e.preventDefault();来阻止模态框关闭，然后调用sweetalert对话框

当用户点击确定按钮时，将input_val_before赋值为当前输入框的值；当用户点击取消按钮时，将输入框的值设置为修改前的值。为什么要这样做呢，因为最后一句$("#myModal").modal("hide");关闭模态框会再次触发hide.bs.modal事件，这样input_val_before和input_val就是相等的，不会再执行下面的操作