Jquery中使用SweetAlert使弹窗更漂亮-蒲公英云

Jquery中使用SweetAlert使弹窗更漂亮

短命女 2023-10-18 19:21 173阅读 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/

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文件下载：

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