Jquery中使用SweetAlert使弹窗更漂亮

短命女 2023-10-18 19:21 141阅读 0赞

## 场景 ##

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

### 效果 ###

![Image 1][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 1][]

SweetAlert官网：

[https://sweetalert.bootcss.com/][https_sweetalert.bootcss.com]

Github:

[https://github.com/t4t5/sweetalert][https_github.com_t4t5_sweetalert]

SweetAlert2:

[https://sweetalert2.github.io/][https_sweetalert2.github.io]

## 实现 ##

### 引入资源文件 ###

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

js文件下载：

[https://download.csdn.net/download/badao\_liumang\_qizhi/11225516][https_download.csdn.net_download_badao_liumang_qizhi_11225516]

具体参照官网文档。

### 在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');
                });
            }
        });
    
    }

效果：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 2][]

[Image 1]: 
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/2019060416460781.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20190604164610496.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=,size_16,color_FFFFFF,t_70
[https_sweetalert.bootcss.com]: https://sweetalert.bootcss.com/
[https_github.com_t4t5_sweetalert]: https://github.com/t4t5/sweetalert
[https_sweetalert2.github.io]: https://sweetalert2.github.io/
[https_download.csdn.net_download_badao_liumang_qizhi_11225516]: https://download.csdn.net/download/badao_liumang_qizhi/11225516
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/2019060416471232.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=,size_16,color_FFFFFF,t_70