【JS套件】使用Javascript SweetAlert 套件網站美化讓Alert 彈跳訊息更友善漂亮(UI/UX視覺設計)－樂夫輕鬆遊

將傳統的Alert 效果美化，下列簡單幾個sample，更多進階sample可參考

官方介紹網址: http://t4t5.github.io/sweetalert/

以及將傳統alert function 做 override，請參考這一篇

1. swal('一般提示訊息!');
2. swal('一般提示訊息!', '小字呈現詳細資訊');
3. swal('尚未選擇照片!','' ,'error');
4. swal('關鍵字已更新完成!','' ,'success');

安裝使用方式，下載套件 https://github.com/t4t5/sweetalert/archive/master.zip

<script src="dist/sweetalert.min.js"></script>
<link href="dist/sweetalert.css" rel="stylesheet" type="text/css" />

效果呈現 1.

進階使用可以有下面這些選項參數，

{
  title: '',
  text: '',
  type: null,
  allowOutsideClick: false,
  showConfirmButton: true,
  showCancelButton: false,
  closeOnConfirm: true,
  closeOnCancel: true,
  confirmButtonText: 'OK',
  confirmButtonColor: '#8CD4F5',
  cancelButtonText: 'Cancel',
  imageUrl: null,
  imageSize: null,
  timer: null,
  customClass: '',
  html: false,
  animation: true,
  allowEscapeKey: true,
  inputType: 'text',
  inputPlaceholder: '',
  inputValue: '',
  showLoaderOnConfirm: false
}

我來做個範例分享一下，其他就讓各位自行發揮囉~

swal({
  title: "刪除照片?",
  text: "所選照片都將刪除!",
  type: "warning",
  showCancelButton: true,
  confirmButtonText: "刪除",
  cancelButtonText: "取消",
  closeOnConfirm: false,
  showLoaderOnConfirm: true,
  closeOnCancel: true,
  allowOutsideClick: true
},
function(isConfirm){
  if (isConfirm) {
         //這邊是模擬 ajax 請求並回應成功後的function
      setTimeout(function(){
        $('.listTb').find('input[type="checkbox"]:checked').each(function(){
            var id = $(this).val();
            $('#'+id).remove();
        });
        swal("刪除完成!", "所選照片已成功刪除!", "success");
      }, 1000);
  }
});