Sweet Alertで簡単に綺麗なアラート画面を作る

普通にjavascriptでalert()を使うと味気ないアラートウィンドウしか出ないが、sweet alertを使うと簡単に綺麗なアラート画面を出せる。
jQuery依存でなくプレーンなjavascriptで使用できる。

導入

• npmでも公式サイトでjsとcssを落とすでもOK。

• 落としてきたら必要なcssとjsをインクルードしておく。

<link rel="stylesheet" type="text/css" href="dist/sweetalert.css">
<link rel="stylesheet" type="text/css" href="themes/twitter.css">

• あとはjavascriptでswal()と呼び出すだけで綺麗なアラートが出る。

swal({
  title: "データを消しますか?",
  text: "消されたデータは元に戻すことができません。",
  type: "warning",
  showCancelButton: true,
  confirmButtonColor: "#DD6B55",
  confirmButtonText: "OK",
  cancelButtonText: "キャンセル",
  closeOnConfirm: false
},
function(){
  swal("削除しました!", "データは正常に削除されました。", "success");
});

細かい使い方は公式を参照。

SweetAlert