勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

JavaScriptのリッチなalert / confirmぽいウィンドウを表示する「sweetalert2」の利用方法

  JavaScript

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

  関連記事

JavaScriptの日時・時刻用ライブラリ「Day.js」の利用方法について

JavaScriptの日時・時刻用を取り扱う際、PHPと比べると(個人的には)使 ...

バニラJS対応(jQuery非依存)の画像遅延読み込みプラグイン「echo.js」の利用方法

あるサイトをブラウザの開発者ツールで見ていると「echo.js」と聞いたことの無 ...

JavaScriptで小数の計算をする際にずれ(誤差)を無くす方法(decimal.js)

JavaScriptで小数の計算をすると値がずれる(誤差が発生する)ことがあった ...

JavaScriptにて「loglevel」ライブラリを利用して環境及びレベルによりログを出し分けする方法

JavaScriptにて何らかの確認の際にconsole.logを使うことが多い ...

jQueryの通知メッセージ用ライブラリ「Toastr」の利用方法

あるサイトのソースコードを拝見しているとToastrというJSファイルをCDNで ...