Javascriptで作る モーダルウィンドウ

まず、モーダルを作る場合、部品が何個あるのか考えます。
今回のモーダルウィンドウでいうと、
①モーダルを呼び出すボタン
②モーダルが出てきた際の背景が黒い画像
③モーダルウィンドウ

大きく分けて、この３つが必要となる。

①モーダルを呼び出すボタン

<section class="container">
      <p>ボタンを押すとモーダルウィンドウが開きます</p>
       <button type="button" class="btn">開く</button>
    </section>

②モーダルが出てきた際の背景が黒い画像

<div class="mask" id="blackMask"></div>

③モーダルウィンドウ

<section class="modal" id="">
      <div class="top">
        <h1>Vue.js Modal Window！</h1>
        <input type="text">
      </div>
      <div class="under">
       <button type="button" class="btn">送信</button>
      </div>
    </section>

次にCSSで非表示設定、Javascriptで動きを付けていく

①mask と　modalを非表示にする（CSS）
1.display: none;
2.transform: translateY(150px,-500px);
※モーダルは上から落ちてくる感じにしたいので、translateY(-500px);で上に置いとく
※SCSSの場合は、CSSではなく、IDの方にクラスを付けるため、{}の外側に書く

  const open = document.getElementById('open');
  const idMask = document.getElementById('idmask');
  const idModal = document.getElementById('idmodal');

  open.addEventListener('click', () => {
    idMask.classList.add('active');
    idModal.classList.add('drop');
  });
  idMask.addEventListener('click', () => {
    idMask.classList.remove('active');
    idModal.classList.remove('drop');
  });

基本的には、要素を取得してきてclickイベントで要素の付け外しを行う

おまけ

.modal {
  background: #ffffff;
  width: 200px;
  border-radius: 4px;
  transform: translate(150px,-500px);
  transition: transform 0.4s;

transition: transform 0.4s;を設定してあげることで、上からゆっくりと
モーダルが落ちてくる。