このところ、数回にわたって
「dialogタグとbackdrop擬似要素を使った、モーダルの作り方」に関する記事を書いてきました。
「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の基本形です。