好用的sweetalert2 (前端Javascript訊息彈跳視窗)

官方網頁: sweetalert2

美化原來Javascript [alert]視窗, 沒辦法取代alert可以暫時停住程式執行的特性, 但是支援執行對應按鈕後個別執行不同程式邏輯。

另外, 它不支援IE

sweetalert2共有4個按鈕可用, 分別為

• OK Button (confirm button)
• NO Button (deny button)
• Cancel Button
• Close Button (右上X按鈕)

JS及CSS引用

<script src="https://code.jquery.com/jquery-3.7.1.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.10.7/dist/sweetalert2.all.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/sweetalert2@11.10.7/dist/sweetalert2.min.css" rel="stylesheet">

sweetalert2 JS Code

Swal.fire({
  title: "這是[title]",
  text: "這是內文[text]",
  icon: "warning",  //success(綠色打勾), error(紅色打叉), warning(黃色金探號), info(藍色i), question(灰色問號)
  showConfirmButton: true,  //OK Button, 預設顯示
  showDenyButton: true,  //NO Button, 預設隱藏
  showCancelButton: true, //Cancel Button, 預設隱藏
  showCloseButton: true,  //右上X Button, 預設隱藏
  confirmButtonText: "OK[confirm]",  //OK Button顯示文字
  denyButtonText: "No[deny]",  //NO Button顯示文字
  cancelButtonText: "Cancel[Cancel]",  //Cancel Button顯示文字
  //reverseButtons: true,  //變更按鈕排序
  allowOutsideClick: true,  //是否允許在視窗外Click關閉視窗 (true/false)
  //confirmButtonColor: '#00ff51',  //按鈕背景色
  //denyButtonColor: '#00ff51',  //按鈕背景色
  //cancelButtonColor: '#00ff51' //按鈕背景色
  //focusConfirm: true,
  //focusDeny: true,
  //focusCancel: true
}).then((result) => {
  if (result.isConfirmed) {  //click confirm-button
    Swal.fire({
      title: "title",
      text: "click confirm-button",
      icon: "success"
    });
  } else if (result.dismiss === Swal.DismissReason.deny)  //click deny-button
  {
    Swal.fire({
      title: "title",
      text: "click deny-button",
      icon: "success"
    });
  } else if (result.dismiss === Swal.DismissReason.cancel) //click cancel-button
  {
    Swal.fire({
      title: "title",
      text: "click cancel-button",
      icon: "success"
    });
  } else if (result.dismiss === Swal.DismissReason.close) //click close-button
  {
    Swal.fire({
      title: "title",
      text: "click close-button",
      icon: "success"
    });
  } 
});