忘備録：モーダルウィンドウ作成 #JavaScript

久しぶりのJavaScript、モーダルウィンドウ作成をしました。

2年以上放置しておりました。
現実はコーディングではなくデザイン業務ばっかりになってしまったので、また1からJavaScriptを学習することにしました。（ありがとう、ドットインストールさん・・・）

勉強しなおしたことで、以前よりも理解が深まった感じがあるので、
メジャーなものから作成して体に覚えさせていこうと思います〜。
とりあえず今回はモーダルウィンドウから始めていきますよ〜！

モーダルウィンドウ作成

実際に制作を行う前に、どのように条件を設定して発火させるかメモを取りました。
①：openはクラス名「modal-open」のボタンをクリックして、htmlに「active」クラスをつける
②：closeはクラス名「modal-close」のボタンだけでなく、モーダル背景の「modal-overlay」をクリックしても閉じるようにする

HTMLの記述

以下、HTMLの記述になります。
わかりやすいようにザッと組んでます。

<body class="l-top">
  <div class="l-wrapper">    
    <main class="l-main">
      <p>モーダルウィンドウ練習だよ</p>
      <button class="modal-open">内容を見る</button>
    </main>

    <div id="modal" class="modal-box">
      <div class="modal-item">
        <p>モーダルの中身だよ！！</p>
        <button class="modal-close">閉じる</button>
      </div>
      <div class="modal-overlay"></div>
    </div>
  </div>
  <script src="main.js"></script>
</body>

始めのJavaScriptの記述

始めは大まかにやりたいこと、条件をザッと記述。
これを基に、動作確認を行ないました。
クリックしたときにhtmlへのクラスの付与、削除を行うので、
一旦このような記述にしています。

  // クラスの取得、判定に使う
  const htmlElement = document.querySelector('html');

  // 開閉周りの定数
  const modalOpen = document.querySelector('.modal-open');
  const modalClose = document.querySelector('.modal-close');


  // modal_open
  modalOpen.addEventListener('click',()=>{
    htmlElement.classList.add('active');
  });

  // modal_close
  modalClose.addEventListener('click',()=>{
    htmlElement.classList.add('active');
  });

動作確認後のJavaScriptの記述

クラスの付与、削除がうまくできたのが確認できたので
ここからボタンとモーダル背景をクリックしたときにクラス削除して閉じるように整えていきます。
モーダル背景の部分で手間取ってしまったので、以下のサイトを参考にforEach文で処理を指定して
モーダルが閉じるようにしました。

  // クラスの取得、判定に使う
  const htmlElement = document.querySelector('html');

  // 開閉周りの定数
  const modalOpen = document.querySelector('.modal-open');
  const modalClose = document.querySelector('.modal-close');
  const modalOverlay = document.querySelector('.modal-overlay');


  // modal_open
  modalOpen.addEventListener('click',()=>{
    htmlElement.classList.add('active');
  });


  // close イベント：ボタンと背景クリックで閉じるようにする
  // forEach文で特定の配列に特化した処理を指定
  const modalCloseEvent = [modalClose,modalOverlay];
  modalCloseEvent.forEach((e)=>{
    e.addEventListener('click',()=>{
      htmlElement.classList.remove('active');
    });
  });

最後に...

forEachの存在を忘れていたので、「なんでここでforEach？」となりましたが、
こちらを確認してみて、なるほどな〜となりました。

どういった処理でこれができる、とかのストック、どんどん増やしていかないとな〜と思いました。