アラートメッセージの決定版!リッチなアラートモーダルを実装できるJSプラグイン「SweetAlert2」

リッチなアラートメッセージモーダルを実装できるJSプラグインを紹介します。豊富な機能を備えており、モーダルでやりたいことが、一通りできます。

アラートメッセージの決定版!リッチなアラートメッセージを実装できるJSプラグイン「SweetAlert2」
SweetAlert2

SweetAlert2は、リッチなアラートメッセージモーダルを実装できるJSプラグインです。

まずは、公式サイトのデモページをご覧ください。

リッチなアニメーションで成功、失敗メッセージを表示できるのはもちろんのこと、モーダル内のボタンから別のモーダルを呼び出したり、モーダル内でjQueryやHTMLを使用できたり、やりたいことが一通りできるようになっています。

 

成功、失敗のアラートメッセージをリッチなアニメーションで表示できます。

成功アラート

 

さらに、モーダル内にボタンを設置し、別のモーダルを呼び出すことができます。

アラート画面にボタン

 

モーダルを繋げて、複数のメッセージを出すことができます。

アラート画面を複数

 

モーダル内に画像を表示することができます。

画像

 

モーダル内にフォームを設置することができます。

モーダル内にフォーム

スポンサーリンク

使い方

サンプルページを実装してみました。

ダウンロード

ソースコードはGitHubに公開されています。右上の「Clone or download」 > 「Donwload ZIP」ボタンからダウンロードできます。

ダウンロード

ダウンロードしたZIPファイルを展開したら、distフォルダに入っている「sweetalert2.js」と「sweetalert2.css」を使います。

さらに、IEサポート用に、「es6-promise.js」をGitHub(es6-promise)からダウンロードしておきます。ZIPファイルを展開したら、dist > libフォルダに入っている「es6-promise.js」を使います。

JS

jQuery、「sweetalert2.js」、「es6-promise.js」を読み込みます。jQueryは、今回のサンプル用です。無しでも動作します。

CSS

「sweetalert2.css」を読み込みます。

サンプルのボタンデザインはこんな感じです。

HTML

HTMLはシンプルです。

JS実行

</body>閉じタグの前で、スクリプトを実行します。

成功モーダルの実装が完了しました。

成功モーダル

他のモーダルも同じ要領で実装することができます。

まとめ

リッチなアラートモーダルを実装できるJSプラグイン「SweetAlert2」を紹介しました。成功、失敗のアラートメッセージの表示の他に、モーダル内から別のモーダルを呼び出したり、モーダル内に画像を表示したり、モーダル内にフォームを表示したり、やりたい機能が揃っているのが嬉しいです。

スポンサーリンク
SweetAlert2 – アラートメッセージの決定版!リッチなアラートメッセージを実装できるJSプラグイン

みんなが見ている記事

コメントを投稿する

  • Posted on 2016.06.11
  • Views 1,570