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