▲TOPへ戻る

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

dialog

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

ダイアログとは、 ユーザーに入力を求めたり、何らかの通知を行うために表示される 小さなウィンドウのこと。

モーダルウィンドウとは、コンピュータの操作画面に ダイアログボックスを表示させ、画面上の他の領域や要素の操作を できないようにするもの。

以下は、ただ単に開いて閉じるだけの例です。クリックしてみてください。

ダイアログ

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

まずは最低限の記述だけ書きます。

HTML

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

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

CSS

2~4行目 : ダイアログを画面中央に表示させます。

8行目 : ダイアログに[open]属性が追加された時のスタイル。 #dialogdisplay: grid を記述すると、最初からダイアログが表示されてしまいます。

12行目 : ::backdrop で、ダイアログ外部の画面の背景色を指定できます。 透過させるため、rgbaがおススメです。

#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

4行目 : showModal()でダイアログを表示させます。

9行目 : close()でダイアログを閉じます。

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

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

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

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

HTML

3~6行目 : formを設置します。 methoddialogにします。

4,5行目 : ボタンにvalueを設定しておきます。

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

javascript

4行目 : dialogreturnValueresultに表示させます。

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

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

ダイアログ

まとめ

  1. dialog】タグを showModal()で開く。
  2. dialog[open]display: grid等、スタイルを記述する。
  3. ::backdrop で、ダイアログ外部の画面の背景色を指定できる。rgbaがおススメ
  4. dialog.returnValueで値を取得

こんな記事も読まれています。

profile

パソコン好きなガオ

コロナ禍によるステイホームを機にプログラミングを学ぶ。パソコンに関してはプロではないが、ちょっと詳しい程度。

パソコン

javascript

カメラ

ブログ