「dialogタグとbackdrop擬似要素を使った、モーダルの作り方」に関する記事を書いてきました。
dialog要素を使ってモーダルウインドウを作成する方法
dialog要素を使ったモーダル内から、チェックボックス等の選択値を受け取る方法
今回は、上記の記事内では触れていなかった、
モーダルを表示する際に「ふわっ」とエフェクトをつけてフェードインさせる方法について、書いていきたいと思います。
まずは結論から。次のようなコードで実現できます
dialog要素を使ったモーダルウインドウを、「ふわっ」とフェードインさせる方法は、
具体的には、次のように書きます。
まずはコードをhtml, JS, cssの順に列挙します。
[html]
<div>
<button id="buttonOpen" class="button-open">dialogタグを使ったモーダルを開く</button>
</div>
<dialog class="container-modal" id="modalDialog">
<div class="wrapper-modal">
<h2>シンプルなモーダル</h2>
<p>
このダイアログ（モーダルウインドウ）は、dialogタグで作成されています。
dialogタグを使うことで、検索エンジンにも
この要素がダイアログ（モーダルウインドウ）だよ、
ということを明示できるのでは、と期待しています。
</p>
<button id="buttonClose" type="reset" class="button-close">モーダルを閉じる</v-btn>
</div>
</dialog>
↑dialog要素を使った、モーダルのhtmlの基本形です。
[JavaScript]
<script>
const myDialog = document.getElementById('modalDialog');
const myButtonOpen = document.getElementById('buttonOpen');
const myButtonClose = document.getElementById('buttonClose');
myButtonOpen.addEventListener('click', () => {
myDialog.showModal();
myDialog.classList.add('is-animation');
});
myButtonClose.addEventListener('click', () => {
myDialog.close('閉じた時に渡すテキスト(String)を指定できます');
});
</script>
↑dialog要素を使った、モーダルを開閉するためのJavaScriptの基本形です。
[css]
.container-modal {
background-color: initial;
border: none;
height: 100%;
left: 0;
opacity: 0;
position: fixed;
top: 0;
transition: all .3s;
width: 100%;
}
.container-modal::backdrop {
background-color: rgba(0, 0, 0, .5);
opacity: 0;
transition: all .3s;
}
.container-modal.is-animation,
.container-modal.is-animation::backdrop {
animation: fadeModal .5s cubic-bezier(0.5, 1, 0.75, 1) 1 forwards;
}
@keyframes fadeModal {
0% {
opacity: 0;
}
75% {
opacity: 1;
}
100% {
opacity: 1;
}
}
.wrapper-modal {
background: rgba(255, 255, 255, 1);
border: none;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, .3);
height: initial;
left: 50%;
opacity: 1;
padding: 40px;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
transition: all .5s;
width: 480px;
z-index: 20;
}
.button-open {
border-radius: .5rem;
display: block;
font-size: .875rem;
margin: 0 auto;
transition: opacity .5s;
}
.button-close {
border-radius: .5rem;
display: block;
font-size: .875rem;
margin: 0 auto;
transition: opacity .5s;
}
.button-open:hover,
.button-close:hover {
opacity: .8;
}
↑dialog要素を使った、モーダルに関するcssの例です。
cssアニメーションを用意して、backdrop擬似要素とdialog要素を対象として付与する
dialog要素を使ったモーダルウインドウは、デフォルトのままだと
特にフェードインエフェクトを有していないので、ちょっと見栄えの面で、工夫が必要かなと思っています。
そこで今回の記事を書いたわけですが、
dialog要素を使ったモーダルウインドウを、「ふわっ」とフェードインさせるには
・cssアニメーションを用意しておく
・モーダルを開閉させるときに、一緒にそのclassを付与してあげる
↑この手順を踏めば、実現できます。
[JavaScript]
<script>
const myDialog = document.getElementById('modalDialog');
const myButtonOpen = document.getElementById('buttonOpen');
const myButtonClose = document.getElementById('buttonClose');
myButtonOpen.addEventListener('click', () => {
myDialog.showModal();
myDialog.classList.add('is-animation');
});
myButtonClose.addEventListener('click', () => {
myDialog.close('閉じた時に渡すテキスト(String)を指定できます');
});
</script>
↑このサンプルコードの、7行目が、アニメーション用のclass付与の部分になります。
cssアニメーションに関する定義としては、次の部分です。
[css]
/* ...(他のclassは省略しています)... */
.container-modal.is-animation,
.container-modal.is-animation::backdrop {
animation: fadeModal .5s cubic-bezier(0.5, 1, 0.75, 1) 1 forwards;
}
@keyframes fadeModal {
0% {
opacity: 0;
}
75% {
opacity: 1;
}
100% {
opacity: 1;
}
}
/* ...(他のclassは省略しています)... */
↑単純に、opacityを変化させるcssアニメーションを定義しておいて、
そのclassをモーダルを開くタイミングで付与してあげるだけです。
これで、dialogタグを使ったモーダルウインドウに、簡単にフェードイン効果を付与することができます。
なお、もちろんJavaScript側でアニメーションをつけても実現できると思いますが
cssアニメーションの方が何かとお手軽だと思うので、今回はこちらの方法をご紹介しました。
この記事のまとめ
今回は、これまで何回かに分けてご紹介した
「dialogタグを使ったモーダルウインドウ」に関して、
「cssアニメーションを使ってフェードインエフェクトをつける」という事について記事を書きました。
デフォルトのままだと
見栄えの面で、すこし工夫が必要なdialogタグですが、
「フェードインアニメーション自体も自作して付与できる」と考えれば、
「逆にカスタマイズ性が高い」ということでもあります。
dialogタグを使ってモーダルを設置できたは良いけれど、エフェクトをつけるにはどうすれば良いの？
という疑問、きっと出ると思いましたので（私自身、そうなりましたので）
この記事を書いてみました。
この記事が、皆さんのWeb制作がより楽しくなる一助になれたらいいな、と願っています。
※この記事は、内容の品質向上を目的に、随時更新を行う場合があります。