今日はHTML 5.2から登場したダイアログボックスの使い方について説明します。
ダイアログタグを使うことでモーダルウィンドウを簡単に作成することができます。
普段はdisplay:noneの状態ですが、dialogタグにopen属性をつけることでダイアログボックスが可視化します。
また、ダイアログボックスの位置はデフォルトで上下中央の最前面に来るようになっています。
こちらがデフォルトのデモになります。
これにcssやjsでアニメーションや装飾を加えてあげると立派なモーダルウィンドウが完成します。
それでは今度はカスタマイズしたダイアログボックスを見てみましょう。
こんな感じですね。よくあるモーダルウィンドウが出来ていると思います。
ではコードを見ていきましょう。
HTML
<p>Click thumbnail below</p>
<p id="open" class="thumb"><img src="fuji.jpg"></p>
<dialog id="dialog">
<h2>赤岳から望む富士</h2>
<div class="dialog-content">
<p class="image-box"><img src="fuji.jpg"></p>
<p>先週赤岳に行ってきました。<br>
天気は快晴でとても爽快でした！<br>
山頂から遠方に富士山が見えるのを発見して記念撮影！
</p>
</div>
<p id="close" type="button">閉じる</p>
</dialog>
画像をクリックすると、モーダルが出てくるような構造を作っていきます。
CSS
@keyframes fade {
0% {
opacity: 0;
transform: translateY(15px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
dialog {
padding: 0;
border: 1px solid #eee;
box-shadow: 1px 1px 2px #333;
position: relative;
}
dialog[open]{
animation: fade 1s ease 0s 1 normal;
}
dialog::backdrop {
background-color: rgba(0, 0, 0, 0.5);
cursor: pointer;
}
dialog h2 {
padding: 10px;
background-color: #B2EBF2;
margin: 0;
color: #FF8A65;
}
dialog div {
color:#424242;
padding: 10px;
}
#close{
background-color: #FF8A65;
text-align: center;
margin: 10px auto 20px auto;
padding: 10px;
border-radius: 4px;
width: 50%;
font-weight: bold;
color: #fff;
box-shadow: 0px 1px 3px #333;
cursor: pointer;
}
.thumb{
width: 300px;
transition: .3s;
cursor: pointer;
}
.thumb:hover{
transition: .3s;
filter: grayscale(80%);
}
.thumb img{
width: 100%;
}
.dialog-content{
display: flex;
}
.image-box{
max-width: 600px;
margin-right: 20px;
}
.dialog-content img{
width: 100%;
}
色々と設定をしていきます。
dialog::backdropと指定すると、ダイアログボックスが可視化した時の外側の背景を設定できます。
dialogタグにopen属性がついたときにCSSアニメーションをつけてあげます。
JS
(function() {
const open = document.getElementById('open');
const close = document.getElementById('close');
const dialog = document.getElementById('dialog');
open.addEventListener('click', function() {
dialog.showModal();
});
close.addEventListener('click', function() {
dialog.close();
});
dialog.addEventListener('click', function(event) {
if (event.target === dialog) {
dialog.close('cancelled');
}
});
}());
dialogタグに関するJavaScriptのソースはほとんど決まり文句のようなものです。
まず、モーダルウィンドウ開閉用のボタンと、ダイアログタグを変数に入れて取得します。
次に、ダイアログボックスにopen属性を加えるクリックイベントを付与します。
showModal()としてあげると、ダイアログボックスにopen属性を付与してくれます。
逆に、close()としてあげると、open属性を外します。
これで完成です。
ダイアログボックスが可視化したときに、周りの背景を押しても閉じるようにしたい場合は、
ダイアログボックス自体にクリックイベントを施してあげます。
クリックした要素がダイアログであれば、open属性を外してあげるようになっています。
従って、ダイアログボックスの中身の要素をクリックしてもイベントは発火しません。
しかし、ダイアログ自体にpaddingなどを加えている場合は、ダイアログボックスの中身のpadding部分でイベントが発火してしまうので注意が必要です。
まとめ
ダイアログボックスはChromeやFirefoxなどのモダンブラウザでしか動作しませんが、
dialog-polyfillを読み込んであげると、IEやSafariでも機能してくれます。
また、headerタグやfooterタグも入れることができるので、様々なレイアウトのページをここで作ることができます。
非常に便利な機能ですので、覚えておきましょう。
