dialogタグを使ったモーダルが表示される時に「ふわっ」とフェードインさせる方法

dialogタグを使ったモーダルが表示される時に「ふわっ」とフェードインさせる方法
この記事をシェアする:
このところ、数回にわたって
「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制作がより楽しくなる一助になれたらいいな、と願っています。

※この記事は、内容の品質向上を目的に、随時更新を行う場合があります。

この記事をシェアする: