【脱jQuery】Javascriptのみでモーダルウィンドウを実装【コピペ】

投稿日 2020年6月4日
更新日 2021年2月19日
著者のせっち
カテゴリープログラミング
カテゴリー脱jQueryシリーズ

こんにちは！フリーランスWebディレクター兼エンジニアののせっち@nosecchi01です。

jQueryを使わず、Javascriptのみでモーダルウィンドウを実装してみましょう。

モーダルウィンドウとは、ボタンをクリックすると画面を覆うように出てくるサブウィンドウの事です。

比較的短いコードで実装できます。

それではいってみましょう！

目標物を確認

早速コードペンで見てみましょう！

See the Pen Modal (Javascript) by Yuki Nose (@yukinouz1) on CodePen.

Javascriptは下記のような流れでコードを書いています。

「Open」ボタンクリックで、モダールウィンドウを表示
「Close」ボタン or 画面外をクリックでモーダルウィンドウを非表示

Javascriptの全体像を確認

まず大まかな流れを確認し、その後細かく分解して見ていきましょう！

const modalBtn = document.getElementById('modalOpen');
const modal = document.getElementById('modal');

const ms = 400;
modal.style.transition = 'opacity ' + ms + 'ms';

modalBtn.addEventListener('click', () =>{
  setTimeout(function(){modal.classList.add('is_open')},1);
  setTimeout(function(){modal.style.opacity = 1}, 50);
});

let modalClose = document.querySelectorAll('.js-modal-close');
  for (let i = 0; i < modalClose.length; i++){
  modalClose[i].addEventListener('click', () => {
    setTimeout(function(){modal.style.opacity = 0}, 1);
    setTimeout(function(){modal.classList.remove('is_open')}, ms)
  });
}

大まかな流れ

クリックする要素、開く要素を取得
クリックでモーダルウィンドウを開く
クリックでモダールウィンドウを閉じる

順番に見ていきましょう！

const modalBtn = document.getElementById('modalOpen');
const modal = document.getElementById('modal');

openボタン　→　id=”modalOpen”

開く要素　→　id=”modal”

を取得しています。

クリックでモーダルウィンドウを開く

const ms = 400;
modal.style.transition = 'opacity ' + ms + 'ms';

modalBtn.addEventListener('click', () =>{
  setTimeout(function(){modal.classList.add('is_open')},1);
  setTimeout(function(){modal.style.opacity = 1}, 50);
});

先ほど取得した、modalBtn(id=”modalOpen”)をクリックしたら、is_openクラスを付与します。opacity: 1;にしておきます。

const ms = 400;
modal.style.transition = 'opacity ' + ms + 'ms';

上記の部分は、CSSで下記のように書くこともできます。

.modal-open{
  transition: opacity 400ms ease;
}

クリックでモダールウィンドウを閉じる

let modalClose = document.querySelectorAll('.js-modal-close');
  for (let i = 0; i < modalClose.length; i++){
  modalClose[i].addEventListener('click', () => {
    setTimeout(function(){modal.style.opacity = 0}, 1);
    setTimeout(function(){modal.classList.remove('is_open')}, ms)
  });
}

.js-modal-closeは「Close」ボタンと、画面外の2つあるので、querySelectorAll()で取得しました。

for文でmodalClose分(modalClose.length)繰り返し処理を回し、クリックイベントを書いていきます。

クリックイベントの中身でまずopacityをゼロ(0)に、その後、is_openクラスを外します。

同時に外してしまうと、transitionが効かないので、is_openクラスを外すのは、ms秒後にしています。

解説は以上です！