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

こんにちは!フリーランス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)
  });
}

大まかな流れ

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

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

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秒後にしています。

解説は以上です!

Javascriptのおすすめ勉強法

学習サイトとしてはドットインストールがオススメです。

僕は基本Progate派なのですが、Javascriptに関してはドットインスールが最適です。

  • とにかく講座数が多い(課金は必須)
  • 実際にアプリを作りながら学べるので実践に近い
  • よく使う技術は何度も出てくるため、自然と覚えられる

Javascriptのオススメ書籍

Javascriptでオススメの書籍はこちらです。

正直内容はツマラナイのですが・・・。

タイトル通り「コードレシピ集」となっており、辞書的に使うのに最適です!

上記のドットインストールと合わせて使うことで、内容を補完し合えるのでオススメです。

まとめ

・jQueryを使わずともjavascirptの基本構文だけでモーダルを実装することができました。

この記事を書いた人

のせっち

福岡県出身。早稲田大学卒。創業100年の鉄鋼商社でバンコク駐在最年少抜擢。毎日擦り切れるまで働かなくても幸せに生きている人々を見てフリーランスになりました。
現在は、主にバンコクでWeb制作、物販を中心に生きています。