Webサイトを構成するUIパーツのひとつに、
ダイアログ、もしくはモーダルウインドウと呼ばれているものがありますよね。

みなさんは、Webサイトにモーダルウインドウを実装する際、
htmlタグは何を使って記述しているでしょうか。

「dialog要素」は名前が示すとおり、
そのダイアログ（モーダルウインドウ）を表すことができるhtmlタグになります。

私自身、モーダルウインドウを自作する場合、
このdialogタグの使い方を覚えるまでは
普通のdiv要素を使って作成していたのですが、
実際に覚えてみるととても使い勝手が良いことに気づきました。

そんな dialogタグの使い方について、早速次のセクションから触れていきたいと思います。

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擬似要素のみで背景を作成できるわけでして、とても使い勝手が良いです。

実際に動くサンプル

実際に動くサンプルを作成してあります。
次のリンク先のページにて、ボタンを押して、挙動を確認する事が可能です。
dialogタグを使ったダイアログ（モーダルウインドウ）のサンプル

MDN内での解説ページ

ご存知、Mozillaが運営するWeb技術に関する優れたオンラインリファレンスである
MDN Web Docs の、dialogタグに関連する各ページは以下の通りです。

dialog: ダイアログ要素 – HTML | MDN
::backdrop – css | MDN
HTMLDialogElement.showModal() – WebAPIs | MDN
HTMLDialogElement.close() – WebAPIs | MDN

↑どの解説ページも、とても参考になります。dialogタグに関する理解がより深まります。

この記事のまとめ。次回記事ではモーダルから値を渡す方法も書く予定です

今回は、ダイアログ（モーダルウインドウ）自体を表す事ができる
html要素、dialog タグについて記事を書いてみました。

showModal() を使って開く事で
自動的に背景をつける事もでき、実際に使ってみると
これまで複数のdiv要素等を組み合わせてモーダルを組んでいた場合と比べ、
かなりスマートに作成する事が可能な印象です。

また、正しい意味合いを持つタグを適切に使用して
構造を検索エンジンに明示するということは、
≒(ニアリーイコールですが)SEO的な観点からも良いかもしれませんね。

今回は単純にダイアログ（モーダルウインドウ）を開閉する部分についての記事でしたが
次回は、開いたモーダルの中にチェックボックスなど、何らかの選択可能なUIパーツを置いておき
それをユーザーが選択した場合に値を受け渡す方法についても、触れていけたらと考えています。

この記事が皆さんのより良いWeb制作体験につながれば、嬉しく思います。

当サイトでは、今後もWebデザイン・Web制作に関する記事を掲載していく予定です。

※この記事は、内容の品質向上を目的に、随時更新を行う場合があります。