【HTML】【javascript】モーダルウィウィンドウ、dialogタグの使い方、値の取得方法

投稿日 : 2022年06月4日 更新日 :

ダイアログ、モーダルウィンドウとは？

ダイアログ

Close

ダイアログを開く

【dialog】HTML、CSS、javascriptの書き方

HTML

<dialog id="dialog">
  <p>ダイアログ</p>
  <button onclick="closeDialog()">Close</button>
</dialog>

<button id="open">ダイアログを開く</button>

CSS

#dialog {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  height: 200px;
}
#dialog[open] {
  display: grid;
  place-items: center;
}
#dialog::backdrop {
  background: rgba(0, 0, 0, 0.204)
}

javascript

const dialog = document.getElementById("dialog");
const openBtn2 = document.getElementById("open");2

openBtn.addEventListener("click", function () {
  dialog.showModal();  // ダイアログ2を開く
});

function closeDialog(){
  dialog.close(); // ダイアログを閉じる
}

ダイアログの値を取得する

HTML

<dialog id="dialog">
  <p>ダイアログ</p>
  <form method="dialog">
    <button value="ボタン1のvalue">ボタン1</button>
    <button value="ボタン2のvalue">ボタン2</button>
  </form>
</dialog>

javascript

const result = document.getElementById("result");

dialog.addEventListener("close", function () {
  result.innerHTML += dialog.returnValue + "<br>";
});

ダイアログ

ボタン1 ボタン2

ダイアログを開く

まとめ