最終更新日: 2021年2月18日

    JavaScriptでポップアップを表示する方法を解説！

    WEBサイトで見かける画像やテキストが一つのまとまりでふわっと現れたりするポップアップというものがあります。サイト内で実装すると見た目が良くなる機能のひとつです。この記事ではJavaScriptでポップアップを表示する方法をサンプルコード付きで解説しています。

    コンテンツ [表示]

    1. 1JavaScriptでポップアップ（モーダルウィンドウ）を表示したい
    2. 2JavaScriptでポップアップ（モーダルウィンドウ）を表示する方法
    3. 3まとめ

    JavaScriptでポップアップ（モーダルウィンドウ）を表示したい

    WEBサイトなどで画像やテキストが一つのまとまりでふわっと現れたりするポップアップを見かけたことをある人も多いのではないでしょうか？

    ポップアップをWEBサイトで実装したいけど、難しそう、、、と思っている人もいるかもしれませんが、JavaScriptを使うことで意外と簡単に実装することができます。

    今回はJavaScriptでポップアップを表示する方法をサンプルコード付きで解説していきます。

    Photo byPexels

    JavaScriptでポップアップ（モーダルウィンドウ）を表示する方法

    今回はボタンを設置して、そのボタンをクリックすると表示されるポップアップを実装していきます。

    index.css

    .popup {
  opacity: 0;
  visibility: hidden;
}

    popupクラスの要素にopacity: 0;とvisibility: hidden;を指定することで初期状態ではポップアップが表示されておらず、ボタンだけが表示されているようにします。

    あわせて読みたい
    visibility
    CSSのvisibilityプロパティはHTMLの要素の表示・非表示を切り替えるプロパティです。visibility: hiddenが指定されている要素は、要素は存在しているが見えない状態となります。構文や使い方をサンプルコード付きで解説します。

    index.css

    .popup.is-show{
  opacity: 1;
  visibility: visible;
}

    popupクラス要素にis-showクラスが与えられたときにopacity: 1;とvisibility: visible;でポップアップを表示するようにします。

    JavaScriptでボタンがクリックされるとpopupクラスの要素にis-showクラスを与えるようにしていきます。

    index.js

    // ポップアップのセッティング処理
function popupSetting(){
  let popup = document.getElementById('popup');
  if(!popup) return;

  let bgBlack = document.getElementById('bg-black');
  let closeBtn = document.getElementById('close-btn');
  let showBtn = document.getElementById('show-btn');

  // ポップアップ
  popUp(bgBlack);
  popUp(closeBtn);
  popUp(showBtn);

  // ポップアップ処理
  function popUp(elem){
    if(!elem) return;
  
    elem.addEventListener('click', function(){
      popup.classList.toggle('is-show');
    });
  }
}

// ポップアップのセッティング
popupSetting();

    popupSetting関数でポップアップの機能を実装しています。この関数の中身の処理を解説していきます。

    getElementByIdメソッドでid属性がpopupの要素を取得しています。関数が実行された場合でも、HTML側でid属性がpopupの要素が見つからなかった場合はそれ以降の処理を実行しないようにif文で制御しています。

    さらにid属性がbg-black,close-btn,show-btnである３つの要素をそれぞれ取得します。
    この３つの要素に対して、popUp関数でクリックイベントを設定しています。

    クリックイベントの中身の処理でpopup要素に対して、is-showクラスを付け外しすることで、ポップアップの機能を実現しています。

    また、bg-black,close-btn,show-btn要素に対してis-showクラスを付け外しして、ポップアップを表示したり非表示にしたりする機能を実装していますが、ポップアップが非表示の場合はshow-btn要素しか表示されていないので、実際bg-black,close-btn要素はポップアップを閉じる処理しか機能しません。

    まとめ

    JavaScriptでポップアップを表示する方法を解説してきました。サンプルコードを参考にしてぜひカスタマイズしてみてください。そうすると、より深い理解ができ、思い通りのポップアップを実装することができるようになるでしょう。

    GeekHive採用サイト

    関連記事