cssメモ 画面を透明→表示する際の記載【モーダルウィンドウ】

モーダルウィンドウ
超個人的なメモです。
参考にならないかもです。

  <div id="modal" class="modal">
    <div class="modal__inner">
      <div id="modal__close" class="modal__close"><i class="fas fa-times"></i></div>
      <img src="image001.jpg">
    </div>
    <div id="modal__background" class="modal__background"></div>
  </div>

  <button id="modal__show">画像を見る</button>

.通常状態のclass{
opacity:0;         //透明にする処理
visibility :hidden; //非表示にする
//これらを記載しておく
};
.hogehoge{
opacity :1;       //100%見えるように
visibility:visible;  //表示する。
};

上記を設定したあとJavaScriptで

'use strict';   //変数忘れ防止用記載

const modal = document.getElementById('modal');
const show = document.getElementById('modal__show');
const close = document.getElementById('modal__close');
const backGround = document.getElementById('modal__background');


show.addEventListener('click', () => {   //addEventListenerでclickを何度でも使える状態
  modal.classList.add('hogehoge');       //hogehogeというクラスをmodalに追加する。追加されたclassのcssが走るので見える
  backGround.classList.add('hogehoge');  //backgroundにもhogehogeを追加。追加されたclassのcssが走るので見える
})

close.addEventListener('click', () => { //closeがクリックされたら    
  modal.classList.remove('hogehoge');   //modalのhogehogeのクラスを除去。クラスのcssが除去されたので消える
  backGround.classList.remove('hogehoge');　//同上
})

backGround.addEventListener('click', () => {　
  close.click();               //こう書くことでcloseをクリックしたこととなり上の処理が走り結果的にclassが除去され、cssも消える
})