dialog要素を使ってモーダルウインドウを作成する方法 :2ページ目

dialogタグの使い方

dialogタグを使ってシンプルなモーダルウインドウを表示してみます。
htmlは次のような構造になります。とてもシンプルです。

<div>
  <button id="buttonOpen">モーダルを開く</button>
</div>
<dialog class="container-modal" id="modalDialog">
  <div class="wrapper-modal">
    <h2>シンプルなモーダル</h2>
    <p>
      サンプルテキスト。
      dialogタグを使うことで、検索エンジンにも
      この要素がダイアログ（モーダルウインドウ）だよ、
      ということを明示できるのでは、と期待しています。
    </p>
    <button id="buttonClose" type="reset">モーダルを閉じる</v-btn>
  </div>
</dialog>

dialogタグは、その属性としてopen属性を指定する事ができます。
open属性を付与する事でダイアログ（モーダルウインドウ）が開き、
open属性を外す事で、ダイアログ（モーダルウインドウ）を閉じることができます。

つまり、同一ページに開くボタン（でなくても良いですが、押せるもの）を置いておき、
それを押したらdialog要素にopen属性を付与してあげれば良い、というわけです。
ということで、上のコードの1〜3行目には、それ用のボタンがあります。
※ちなみに、dialogタグの開閉操作を行うための専用のメソッドがあるのですが、それについては後述します。

開く、閉じる操作を行うためのJavaScript側の記述は以下のようになります。

<script>
const myDialog = document.getElementById('modalDialog');
const myButtonOpen = document.getElementById('buttonOpen');
const myButtonClose = document.getElementById('buttonClose');

myButtonOpen.addEventListener('click', () => {
  myDialog.setAttribute('open', '');
});
myButtonClose.addEventListener('click', () => {
  myDialog.removeAttribute('open');
});
</script>

↑2行目で対象のdialogタグを取得、
3行目で開くボタンを取得、
4行目で閉じるボタンを取得。

6〜8行目が開くための記述、
9〜11行目が閉じるための記述になります。

cssは自由ですが、たとえば次のように書く形が想定できます。

.container-modal {
  background-color: initial;
  border: none;
  height: 100%;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
}
.container-modal::backdrop {
  background-color: rgba(0, 0, 0, .5);
}
.wrapper-modal {
  background: rgba(255, 255, 255, 1);
  border: none;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, .3);
  height: 320px;
  left: 50%;
  opacity: 1;
  padding: 40px;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: opacity .3s;
  width: 480px;
  z-index: 20;
}

↑ここで、10〜12行目に注目してください。
::backdrop、という見慣れない擬似要素がありますね。
この擬似要素を使う事ができるのが、dialogタグを使いたくなる理由のひとつです。

それではこの ::backdrop 擬似要素がなんなのか、次のセクションで書いていきます。

::backdrop擬似要素で、dialogタグは自動的に背景を持つことができます

上のセクションのcss部分で出てきた ::backdrop 擬似要素。
これは、dialogタグのすぐ下で、背景レイヤーとして機能させる事ができる擬似要素になります。

背景用にわざわざ空のdiv要素を置いておかずとも、
この::backdrop擬似要素のみで背景を作成できるので、とても便利です。

ただし、dialogタグにおいてこの::backdrop擬似要素を有効にするためには、
ある手順が必要です。

それは、「showModal()」という専用メソッドを使って、dialogタグを開いてあげるという事です。
それについてのコードは以下のようになります。

dialogを開くために用意されているメソッド showModal() を使用してみる

<script>
const myDialog = document.getElementById('modalDialog');
const myButtonOpen = document.getElementById('buttonOpen');
const myButtonClose = document.getElementById('buttonClose');

myButtonOpen.addEventListener('click', () => {
  myDialog.showModal();
});
myButtonClose.addEventListener('click', () => {
  myDialog.close('閉じた時に渡すテキスト(String)を指定できます');
});
</script>

↑「showModal()」という専用メソッド、
と聞くと難しいのかなと思いましたが、何のことはありません。

myDialog.setAttribute(‘open’, ”);
としていたところを、
myDialog.showModal();
に変更しているだけです。

閉じる場合も専用のメソッドがあり、その名の通り close(); というメソッドが使用できます。
myDialog.removeAttribute(‘open’);
としていたところを、
myDialog.close();
に変更するだけです。

冒頭に書いたコードと何が違うかといえば、
showModal() を使ってdialog要素を開いた場合に
::backdrop 擬似要素が有効になる
ということです。

ひとつ上のセクションで書いた通り、

背景用にわざわざ空のdiv要素を置いておかずとも
この::backdrop擬似要素のみで背景を作成できるわけでして、とても使い勝手が良いです。