dialog要素を使った実装を試してみます。
dialog要素について
dialog要素は名前の通り、ダイアログやモーダルなどのUIを実装するための要素です。
open属性を設定することで表示されますが、open属性を直接操作するのではなく、JavaScriptのshow()メソッドかshowModal()メソッドを使用して表示することが推奨されています。
dialog要素はアクセシビリティの面も考慮された実装になっています。
実例は後述していますが、キーボード操作でダイアログを開いた際はダイアログ内にフォーカスが移動して、ダイアログを閉じた際はダイアログを開く前のフォーカス位置に戻ります。
showModal()メソッドを使ったダイアログの場合、Escキーでもダイアログを閉じることができます。
対応ブラウザに関して、主要なブラウザでは特に問題なくサポートされているようですが、Safariが15.4からの対応になるので、場合によっては注意が必要かもしれません。
サンプルコード
dialog要素を実際に使ってみます。
1 2 3 4 5 6 7 8 9 10 | <button id="open-btn">dialogを開く</button><dialog id="dialog"> <p>dialogの内容</p> <p><a href="#">リンクテスト</a></p> <p><button id="close-btn">dialogを閉じる</button></p> <form method="dialog"> <button>dialogを閉じる2</button> </form></dialog> |
前述の通り、dialog要素を表示する際はshow()メソッドかshowModal()メソッドを使用します。
まずはshow()メソッドを使用した場合です。
1 2 3 4 5 6 7 8 | // dialogを開くdocument.getElementById('open-btn').addEventListener('click', function() { document.getElementById('dialog').show();});// dialogを閉じるdocument.getElementById('close-btn').addEventListener('click', function() { document.getElementById('dialog').close();}); |
dialogを閉じる際はclose()メソッドを使用するか、form要素のmethod属性にdialogを指定したフォームを送信します。
これでdialogの開閉ができました。
show()メソッドでdialogを表示するデモページ
次にshowModal()メソッドを使用した場合です。
1 2 3 4 5 6 7 8 | // dialogを開くdocument.getElementById('open-btn').addEventListener('click', function() { document.getElementById('dialog').showModal();});// dialogを閉じるdocument.getElementById('close-btn').addEventListener('click', function() { document.getElementById('dialog').close();}); |
show()メソッドで実装した場合と少し違い、黒透過の背景付きで表示されるようになりました。
showModal()メソッドでdialogを表示するデモページ
chromeのデベロッパーツールで確認すると、showModal()での実装の方はtop-layerというレイヤーがdocumentの外側に配置されているのが分かります。
このTop layer(最上位レイヤー)は他レイヤーの最上位に位置するため、z-indexなどの考慮が必要なくなります。
showModal()の黒透過部分は::backdrop疑似要素で設定されています。
背景部分を含めてdialogのスタイルを変更してみます。
1 2 3 4 5 6 7 8 9 10 | <dialog id="dialog" class="dialog"> <p>dialogの内容</p> <p><a href="#">リンクテスト</a></p> <p><button id="close-btn">dialogを閉じる</button></p> <form method="dialog"> <button>dialogを閉じる2</button> </form> ～略～ <p>dialogの内容</p></dialog> |
1 2 3 4 5 6 7 8 | .dialog { border: none; padding: 0; width: 300px;}.dialog::backdrop { background: rgba(255, 0, 0, 0.6);} |
画面高さよりコンテンツ量が多い場合、スクロールバーが表示されます。
dialogのスタイルを変更するデモページ
コメントが承認されるまで時間がかかります。