利用SweetAlert2取代浏览器的Alert和Confirm提示框

我们做前端通常会用到提示框或者确认框，比较简单直接的就用JS自带的alert或者confirm方法，但是这种提示框会因为浏览器的不同，而出现各种样式，并且不太美观，如Chrome的就是：

 不但出现在浏览器顶部，还带有网址，用户体验非常差，今天我们就用SweetAlert2这个库，取代这个难看的提示框，先来看看效果：

是不是瞬间高大上了，废话不多说，上代码：

    <script src="//cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.js"></script>
    <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css" />

 加入库引用。

//提示框
function sweetAlert(title, icon) {
    Swal.fire({
        title: title,
        icon: icon,
        confirmButtonColor: '#208ADB',
        confirmButtonText: '确定',
    })
}

//确认提示框
function sweetAlertConfirm(btn, title, content) {
    if (btn.dataset.confirmed) {
        btn.dataset.confirmed = false;
        return true;
    } else {
        event.preventDefault();
        Swal.fire({
            title: title,
            text: content,
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#208ADB',
            cancelButtonColor: '#626F75',
            confirmButtonText: '确定',
            cancelButtonText: '取消'
        }).then((result) => {
            if (result.isConfirmed) {
                btn.dataset.confirmed = true;
                btn.click();
            }
        })
    }
}

//复写自带alert
function alert(title) {
    sweetAlert(title, "info");
}

上面是配置代码，下面是调用：

        <a href="javascript:;" onclick="sweetAlert('这是提示标题','info');">提示</a>

        <a href="http://www.mojocube.com/" onclick="sweetAlertConfirm(this,'确定跳转吗?','');">跳转</a>

好了，这样就完成了，是不是很简单，下面附上demo源码下载地址：

利用SweetAlert2取代浏览器的Alert和Confirm提示框-Javascript文档类资源-CSDN下载

如果要改默认字体大小和提示框的层级（比如会被某些遮罩挡住），可以通过修改css实现：

        .swal2-title{font-size:12pt !important;}
        .swal2-container{ z-index:999999 !important;}

PS: 下面是不同类型图标的代码：