[js基礎②]クリックしてモーダルを開閉する実装

昨日はボタンをクリックしたら、テキストの色を変えるという実装を紹介しました。
今回はそれを応用して、ボタンをクリックしたらモーダルを開くという処理をします。

ヘッダーのハンバーガーメニューや、画像の詳細などでモーダルはよく使うので、参考になれば幸いです。

モーダルの開閉

早速、ボタンをクリックしたらモーダルを開閉する実装を紹介します。
下記のモーダルを開くボタンを押すとモーダルが開きます。

See the Pen Untitled by 勇飛高松 (@ngcorrsc-the-solid) on CodePen.

ボタンをクリックすると、id=modal の要素をdisplay=none　からdisplay=blockに変えます。

document.getElementById('openModal').addEventListener('click', () => {
  document.getElementById('modal').style.display = 'flex';
});

モーダルの中にあるバツボタンをクリックすると、反対にdisplay=noneに設定してモーダルを消します。

document.getElementById('closeModal').addEventListener('click', () => {
  document.getElementById('modal').style.display = 'none';
});

モーダルの外側をクリックしたときにも、モーダルが閉じるようにしています。

window.addEventListener('click', (e) => {
  const modal = document.getElementById('modal');
  if (e.target === modal) {
    modal.style.display = 'none';
  }
});

windou.addEventListenerで、画面上のどこをクリックしてもjsが動きます。
e.target === modalの条件。これは画面をクリックした場所がもしもモーダルであれば、閉じる。
※モーダル内部(modal-content)をクリックしたら、falseになって処理が動かない

以上。こんな感じでモーダルの開閉ができます。

まとめ

今回はモーダルの開閉についてまとめました。

webサイトでもアプリでも、基本となる挙動なので仕組みを覚えて使っていきたいですね。