【開発環境】
macOS Catalina
バージョン 10.15.3
visual studio code
Javascriptを使ってダイアログボックスを作成する
ダイアログボックスは一般的にalert()やprompt()などで作ります。しかし、これらで作るとカスタマイズができません。
今回は自作で、自由にカスタマイズできるダイアログボックスを作っていきます。
骨組みとなるhtmlとcssを作っていきます
まず、html.cssを作っていきます。
index.html
<body><formid="dialog"name="dialog"><p>ボタンをクリックしてください</p><inputtype="button"name="yes"value="はい"/><inputtype="button"name="no"value="いいえ"/><inputtype="button"name="cancel"value="キャンセル"/></form><script></script></body>次にcssを付与していきます。今回は、head要素内にstyleタグを追加してCSSを記述します。
index.html
<head><style>#dialog{width:250px;padding:30px20px;text-align:center;border:1pxsolid#aaa;box-shadow:2px2px4px#888;}</style></head>これで骨組みが完成しました。これからjsを記述していきます。
Javascriptの記述
form要素で作成しているので、name属性を利用すればJavaScriptから簡単にアクセスすることができます。
index.html
<script>//form要素を取得するconstform=document.forms.dialog;form.yes.addEventListener("click",()=>{console.log("「はい」がクリックされました");});form.no.addEventListener("click",()=>{console.log("「いいえ」がクリックされました");});form.cancel.addEventListener("click",()=>{console.log("「キャンセル」がクリックされました");});</script>各ボタンに対してクリックイベント処理を実装しています。
addEventListenerメソッドを用いてclickされた時に文字が表示されるようにします。
以上でダイアログボックスの作成は完了です。
おわりに
今回は簡単な自作ダイアログボックスの作成手順を紹介しました。
間違いなどがありましたらご指摘いただければ幸いです。
最後までご覧いただきありがとうございました。