2022年5月17日 星期二

把JS ALERT變漂亮

 當系統開發運行趨於穩定後,使用者開始對UI/UX的需求就會趨向積極,恩恩...對單純的Programmer來說,美感永遠不是得優先強化的項目,當然嘔心瀝血做了好幾天更新上的版面,被吐槽到爆炸的評語帶來的挫折也不是一天兩天就能平復的,總之...依賴第三方套見是個不錯的選擇。

SWEETALERT2 可支援BootStrap是不錯的選擇,官網上的範例也很豐富大概常用的情境都有了,要更炫目的也有但使用者口味是會被養刁的,不要隨便做害人(舉某系統說他有位啥你沒有)害己(其他業管的系統為啥沒有)的決定。

取代alert();

Swal.fire("訊息","Hello world.","error");

取代comfirm();

Swal.fire({

  title: "警告",
  icon: "info", //warring(orange), primary(dark blue), info(blue), success(green), danger(red)
  html: "<font color='red'>查無OOOOO<br>請再次確認</font>",
  showCloseButton: false,
  showCancelButton: true,
  focusConfirm: false,
  confirmButtonText: "提交",
  cancelButtonText: "取消",
}).then((result) => {
  if (result.isConfirmed) {
  //Do something.;
  }

})

沒有留言: