通過引用必要的檔案來初始化插件:

在 <head>和</head> 之間引用必要的檔案: 下載檔案
<script src="dist/sweetalert.min.js"></script>
		<link rel="stylesheet" type="text/css" href="dist/sweetalert.css">
		<script type="text/javascript">swal.setDefaults({confirmButtonText :	"確定" , cancelButtonText :	"取消"	}); </script>

漂亮的對話視窗使用範例

基本訊息

swal("在這裡輸入訊息文字!")

標題與下方訊息文字

swal("在這裡輸入標題文字", "在這裡輸入訊息文字!")

成功訊息

swal("在這裡輸入標題文字", "在這裡輸入訊息文字!", "success")

警告訊息並附帶確認按鈕

swal({
  title: "Are you sure?",
  text: "You will not be able to recover this imaginary file!",
  type: "warning",
  showCancelButton: true,
  confirmButtonColor: "#DD6B55",
  confirmButtonText: "Yes, delete it!",
  closeOnConfirm: false
},
function(){
  swal("Deleted!", "Your imaginary file has been deleted.", "success");
});

通過傳遞參數,您可以執行“取消”.

swal({
  title: "Are you sure?",
  text: "You will not be able to recover this imaginary file!",
  type: "warning",
  showCancelButton: true,
  confirmButtonColor: "#DD6B55",
  confirmButtonText: "Yes, delete it!",
  cancelButtonText: "No, cancel plx!",
  closeOnConfirm: false,
  closeOnCancel: false
},
function(isConfirm){
  if (isConfirm) {
    swal("Deleted!", "Your imaginary file has been deleted.", "success");
  } else {
	    swal("Cancelled", "Your imaginary file is safe :)", "error");
  }
});

自訂圖示

swal({
  title: "Sweet!",
  text: "Here's a custom image.",
  imageUrl: "images/thumbs-up.jpg"
});

使用HTML訊息

swal({
  title: "HTML <small>Title</small>!",
  text: "A custom <span style="color:#F8BB86">html<span> message.",
  html: true
});

限時自動關閉訊息

swal({
  title: "Auto close alert!",
  text: "I will close in 2 seconds.",
  timer: 2000,
  showConfirmButton: false
});

取代「提示」功能(文字輸入)

swal({
  title: "An input!",
  text: "Write something interesting:",
  type: "input",
  showCancelButton: true,
  closeOnConfirm: false,
  animation: "slide-from-top",
  inputPlaceholder: "Write something"
},
function(inputValue){
  if (inputValue === false) return false;
  
  if (inputValue === "") {
    swal.showInputError("You need to write something!");
    return false
  }
  
  swal("Nice!", "You wrote: " + inputValue, "success");
});

AJAX請求範例

swal({
  title: "Ajax request example",
  text: "Submit to run ajax request",
  type: "info",
  showCancelButton: true,
  closeOnConfirm: false,
  showLoaderOnConfirm: true,
},
function(){
  setTimeout(function(){
    swal("Ajax request finished!");
  }, 2000);
});