JavaScriptのAlertをオシャレに表示する方法

Web

こんにちは!増田拓海です。

今回はalertをオシャレに表示できるSweetAlert2というjsプラグインを紹介していきます。

SweetAlert2とは?

SweetAlert2はJavaScriptのAlertをオシャレに表示してくれるプラグインです。

特にCSSの知識がなくてもいい感じのAlertを表示してくれます。

実装方法

ライブラリはCDNで公開されているので、下記のコードをheadタグ内に書けば読み込めます。

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@8"></script>
<script src="https://cdn.jsdelivr.net/npm/promise-polyfill"></script>

アラートを表示するときは下のスクリプトをbodyタグ内のscriptタグに書くことでできます。

Swal.fire("文字")

一つ注意しなければならないのがheadタグ内ではなくbodyタグ内にスクリプトを書かなければならないところです。

bodyタグ内に書かないと実行されません。

今回は簡単なalertを表示する方法を紹介しましたが、公式サイトで更にカスタマイズ出来るオプション等を調べることが出来るので、興味がある方はぜひ見てみてください。

最後まで読んでいただきありがとうございました!!!

コメント

タイトルとURLをコピーしました