SweetAlert 2 全網最詳細的使用方法

 

官網鏈接

SweetAlert2 官網鏈接

准備階段

CDN js
如果該 鏈接 時間久遠了 , 可以在官網去找找最新的
可以把 js 復制出來 自己新建一個文件 然后 引用到 html 中

1. 帶有 確定和取消的 彈框

Swal.fire({
    type: 'warning', // 彈框類型
    title: '注銷帳號', //標題
    text: "注銷后將無法恢復，請謹慎操作！", //顯示內容 

    confirmButtonColor: '#3085d6',// 確定按鈕的 顏色
    confirmButtonText: '確定',// 確定按鈕的 文字
    showCancelButton: true, // 是否顯示取消按鈕
    cancelButtonColor: '#d33', // 取消按鈕的 顏色
    cancelButtonText: "取消", // 取消按鈕的 文字

    focusCancel: true, // 是否聚焦 取消按鈕
    reverseButtons: true  // 是否 反轉 兩個按鈕的位置 默認是 左邊 確定 右邊 取消
}).then((isConfirm) => {
    try {
        //判斷 是否 點擊的 確定按鈕
        if (isConfirm.value) {
            Swal.fire("成功", "點擊了確定", "success");
        }
        else {
            Swal.fire("取消", "點擊了取消", "error");
        }
    } catch (e) {
        alert(e);
    }
});

2.帶有 展示 標簽內容 的彈框

var content = "無記錄";
var msg=""; //msg 是從外面傳入的數據

if (msg) {

    content = "<p style='color: red'>最近一次操作后的5小時內有效</p> "
        + "<p>可以使用 Ctrl +F 查找關鍵字</p>"
        + "<table class='table_list'>"
        + "<tr>"
        + " <th class='js_tr_data'> 時間</th> <th>名稱</th> <th>密碼</th>"
        + "</tr>"
        + msg
        + "</table>"
}

Swal.fire({
    title: '<strong>記錄</strong>',
    type: 'info',
    html: content, // HTML
    focusConfirm: true, //聚焦到確定按鈕
    showCloseButton: true,//右上角關閉
})

3.帶有定位 和 消失時間的 彈框

Swal.fire({
  position: 'top-end', //定位 左上角
  type: 'success',
  title: 'Your work has been saved',
  showConfirmButton: false,
  timer: 1500
})

4. 自定義 第三方 css 的 彈框 (推薦使用 Animate.css )

Swal.fire({
  title: 'Custom animation with Animate.css',
  animation: false,
  customClass: 'animated tada'
})

5. 右上角 通知類 彈窗

Swal.fire({
    toast: true,
    position: 'top-end',
    showConfirmButton: false,
    timer: 3000,
    type: 'success',
    title: 'Signed in successfully'
})

6. 如何 做 一個自己的 通用模版

//定義模版 (可多次使用)
var MyBox = Swal.mixin({
    toast: true,
    position: 'top-end',
    showConfirmButton: false,
    timer: 3000
});

//調用
MyBox.fire({
    type: 'success',
    title: 'successfully'
});

未完待續… 嘿嘿嘿