WEBサイトでalert（アラート）を出力する場合、通常は下記のような警告メッセージが出力されます。

「SweetAlert」を使用するとオシャレな警告メッセージを出力することができます。

テキストやデザインを自由に変更することができ、オプションで様々なダイアログメッセージを設定することが可能です。

今回はjQueryのスクリプト「SweetAlert」の使用方法をご紹介します。

「SweetAlert」の使用方法

下記のページから「SweetAlert」をダウンロードします。

SweetAlert

ファイル読込

jQuery、ダウンロードした「SweetAlert」を読み込みます。

HTML

ダイアログメッセージを出力するボタンを用意します。

JS

ボタンをクリックした場合「SweetAlert」を使用するように設定します。

または、下記のように記述します。

サンプル

下記より、「SweetAlert」を使用したアラートを確認できます。
確認メッセージやアイコンを使用したメッセージなどカスタマイズが可能です。

「SweetAlert」のデモページ

まとめ

WEBサイトで警告を示すアラートやダイアログメッセージを出力することはあると思います。
通常はスタイルを設定することができませんが、「SweetAlert」を使用すると独自のスタイルでダイアログを出力することが可能です。

オプションで色々とカスタマイズすることができるので、様々な用途で活用できそうです。