「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制作がより楽しくなる一助になれたらいいな、と願っています。
※この記事は、内容の品質向上を目的に、随時更新を行う場合があります。