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制作に関する記事を掲載していく予定です。
※この記事は、内容の品質向上を目的に、随時更新を行う場合があります。