alert()をかわいく表示できるJavaScript「sweetAlert」

エラーとかがあるときにアラートがでることがありますが、ちょっと無機質ですよね。 SweetAlertを利用すると、かわいさを醸しだして気まずさも緩和できそうです。

sponsors

使用方法

SweetAlertからファイル一式をダウンロード。

<script type="text/javascript" src="sweet-alert.js"></script>
<link rel="stylesheet" type="text/css" href="sweet-alert.css"/>
    <script type="text/javascript">
document.querySelector('button').onclick = function(){
  swal({
    title: "Error!", //タイトル
    text: "Here's my error message!", //メッセージ
    type: "error", // 表示タイプ"warning", "error", "success" and "info"
    confirmButtonText: "Cool" //確認ボタン
  });
};
    </script>
    
あとはbuttonを上記のJS記述以前に設置すれば完成です。

<button>クリック</button>

サンプル


Javascriptサンプルページ一覧
skuare.net

sponsors