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

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

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

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

増田拓海

増田拓海という名前で活動している中学生です。 現在、個人のプロダクトでThinkShareというWebサービスを開発・運営しております。 書ける言語はPython,JavaScript,Go(勉強中)です。

シェアする

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


コメントする

日本語が含まれない投稿は無視されますのでご注意ください。