Jquery中使用SweetAlert使弹窗更漂亮

场景

一个漂亮的、响应性强、可定制的、可访问的JAVASCRIPT弹出框的替代。

效果

SweetAlert官网：

https://sweetalert.bootcss.com/

Github:

https://github.com/t4t5/sweetalert

SweetAlert2:

https://sweetalert2.github.io/

实现

引入资源文件

<script src=" href='https://cdn.bootcss.com/sweetalert/1.1.3/sweetalert.min.js">https://cdn.bootcss.com/sweetalert/1.1.3/sweetalert.min.js"></script>

或者将其下载手动在html中引用。

js文件下载：

具体参照官网文档。

在js中使用

创建一个简单的错误提示

swal({
            type: 'error',
            title: '错误提示',
            text: '请选择一个架构！'
        })

监听两个按钮的事件以及回调函数

swal({
        title: '创建新的架构？',
        text: '请您首先选择需要创建的架构等级！',
        type: 'warning',
        showCloseButton: true,
        showCancelButton: true,
        confirmButtonColor: "#DD6B55",
        cancelButtonColor: '#DD4B55',
        confirmButtonText: '下级创建',
        cancelButtonText: '同级创建',
    }).then(function(isConfirm) {
        if (isConfirm.value === true) {
            var url = '/sysEnterpriseOrg/orgAdd.do';
            var data = {"id":sel,"op":"nextLevel"};
            $('#addDiv').load(url, data, function () {
                initOrgAddFormValidate("nextLevel");
                $("#orgAddModel").modal('show');
            });
        }
        if (isConfirm.dismiss === "cancel") {
            var url = '/sysEnterpriseOrg/orgAdd.do';
            var data = {"id":sel,"op":"sameLevel"};
            $('#addDiv').load(url, data, function () {
                initOrgAddFormValidate("sameLevel");
                $("#orgAddModel").modal('show');
            });
        }
    });

上面具体含义比较简单，见文知意，具体参照官方文档。

完整示例代码：

/**
 * 添加架构
 * @returns {boolean}
 */
function orgAdd() {
    var ref = $('#org_tree').jstree(true),
        sel = ref.get_selected();
    if(!sel.length) {
        swal({
            type: 'error',
            title: '错误提示',
            text: '请选择一个架构！'
        })
        return false;
    }
    sel = sel[0];
    swal({
        title: '创建新的架构？',
        text: '请您首先选择需要创建的架构等级！',
        type: 'warning',
        showCloseButton: true,
        showCancelButton: true,
        confirmButtonColor: "#DD6B55",
        cancelButtonColor: '#DD4B55',
        confirmButtonText: '下级创建',
        cancelButtonText: '同级创建',
    }).then(function(isConfirm) {
        if (isConfirm.value === true) {
            var url = '/sysEnterpriseOrg/orgAdd.do';
            var data = {"id":sel,"op":"nextLevel"};
            $('#addDiv').load(url, data, function () {
                initOrgAddFormValidate("nextLevel");
                $("#orgAddModel").modal('show');
            });
        }
        if (isConfirm.dismiss === "cancel") {
            var url = '/sysEnterpriseOrg/orgAdd.do';
            var data = {"id":sel,"op":"sameLevel"};
            $('#addDiv').load(url, data, function () {
                initOrgAddFormValidate("sameLevel");
                $("#orgAddModel").modal('show');
            });
        }
    });

}

效果：