jQuery+sweetalert.jsで簡単に美しいアラート(メッセージボックス)を実装!

HTML

Webシステムの開発において、アラート(警告ダイアログ・メッセージボックス)を使う場面は多いのですが、javascript標準の alert() は見た目が貧弱なので、jQuery+「sweetalert.js」を使ってみました。

sweetalertを使うと、美しいアラートウィンドウを簡単に実装できます。

使い方はとても簡単で、公式サイトからダウンロードしたスクリプトを読み込み、swal()関数を呼び出します。

ちなみに、標準のアラートとは、下のボタンをクリックした時に表示されるようなモノです。ブラウザによって、スタイルが異なります。

これが、sweetalertを使うことで、以下のような表示になります。

一番シンプルな使い方

sweetalert.js

タイトルを付ける

sweetalert.js

アイコンを付ける

sweetalert.js

sweetalert.js

sweetalert.js

sweetalert.js

ボタンのカスタマイズ

sweetalert.js

sweetalert.js

sweetalert.js


以上、「sweetalert.js」の簡単な紹介でした。

他にも色々なオプションが用意されているので、さらに詳しくは公式ドキュメントをご確認ください。