JavaScriptのリッチなalert / confirmぽいウィンドウを表示する「sweetalert2」の利用方法
JavaScriptのalert / confirmはブラウザによって表示位置やデザインが異なる。また、そもそもの見た目(デザイン)も少々気になるところ。この辺りを解決できないか調べたところ「sweetalert2」というライブラリで対応できそう。以下に利用方法をメモ。
sweetalert2
公式サイト
https://sweetalert2.github.io/
デモページ
https://sweetalert2.github.io/#examples
CDN
CDNで使う場合は以下を記述する。
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.11.0/dist/sweetalert2.all.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/sweetalert2@11.11.0/dist/sweetalert2.min.css" rel="stylesheet">
サンプル
https://taitan916.info/sample/sweetalert2/
利用方法
ソースコード
<button id="alert" type="button" class="button-class">alert</button> <button id="confirm" type="button" class="button-class">confirm</button> <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.11.0/dist/sweetalert2.all.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/sweetalert2@11.11.0/dist/sweetalert2.min.css" rel="stylesheet"> <script> document.getElementById(`alert`).onclick = function() { Swal.fire(`alertテスト`); } document.getElementById(`confirm`).onclick = function() { Swal.fire({ title: `confirmテスト`, showDenyButton: true, confirmButtonText: `Yes`, denyButtonText: `No` }).then((result) => { if( result.isConfirmed ){ Swal.fire(`Yesをクリックしました。`); }else if (result.isDenied){ Swal.fire(`Noをクリックしました。`); } }); } </script>
解説等
バニラJS対応ライブラリのため「document.getElementById」としているが、もちろんjQueryを導入して「$(`#alert`).on('click',~~)」という形でも問題無し。
また、各種パラメータについてはこちらのページを参照すること。
関連記事
-
-
JavaScriptでランダムなカラーコードを生成する「RandomColor」ライブラリの利用方法
先日PHPでランダムなカラーコードを生成する「RandomColor.php」ラ ...
-
-
JavaScriptにて時間や長さの単位を変換及び計算できる「mathjs」ライブラリの利用方法
JavaScriptにて時間の単位を「分->時」に、長さの単位を「mm-& ...
-
-
JavaScriptで小数の計算をする際にずれ(誤差)を無くす方法(decimal.js)
JavaScriptで小数の計算をすると値がずれる(誤差が発生する)ことがあった ...
-
-
JavaScriptにて数値のカウントアップ及びカウントダウンを表示する「countUp.js」ライブラリの利用方法
だいぶ前にバニラJSにて数値のカウントアップ及びカウントダウン表示を行う方法をメ ...
-
-
JavaScriptでダミー画像(プレースホルダー画像)を表示する「Holder.js」ライブラリの利用方法
サイトの開発段階で「本番用の画像はまだ用意できていない」等の理由によりダミー画像 ...