JavaScriptでモーダル（ポップアップ）を表示させる方法

今回は、JavaScriptを使ってモーダル（ポップアップ画像）を表示させる方法を紹介します。

jQueryは使わずに、生のJavaScriptだけでやります。2つのパターンを想定してます。

モーダルとは？

画像や広告などが表示されて、クリックや閉じるなどの操作をしないとページが閲覧できないような表現です。

実際にデモを見れば分かると思います。

 

1.ページが表示された時に表示されるパターン

広告とかで使われるパターンです。ウザいので結構嫌われてます。

DEMO

 

2.ボタンをクリックしたら表示されるパターン

画像の拡大表示などで使われるパターンですね。

DEMO

それぞれの実装方法を紹介します。

ページが表示された時に表示されるモーダル（ポップアップ）

まずはこちらのパターンです。

DEMO

あらかじめCSSの前にFontAwesome アイコンを呼び出してください。

<link href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" rel="stylesheet">

FontAwesomeアイコンって何？という人は、こちらの記事を読んでください。
FontAwesomeアイコンの使用方法

HTML

<div class="popup" id="js-popup">
  <div class="popup-inner">
    <div class="close-btn" id="js-close-btn"><i class="fas fa-times"></i></div>
    <a href="#"><img src="./img/popup.jpg" alt="ポップアップ画像"></a>
  </div>
  <div class="black-background" id="js-black-bg"></div>
</div>

CSS

.popup {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: .6s;
}
.popup.is-show {
  opacity: 1;
  visibility: visible;
}
.popup-inner {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  width: 80%;
  max-width: 600px;
  padding: 50px;
  background-color: #fff;
  z-index: 2;
}
.popup-inner img {
  width: 100%;
}
.close-btn {
  position: absolute;
  right: 0;
  top: 0;
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  cursor: pointer;
}
.close-btn i {
  font-size: 20px;
  color: #333;
}
.black-background {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,.8);
  z-index: 1;
  cursor: pointer;
}

.popupというクラスは非表示(opacity:0; visibility:hidden)にして、.is-showクラスが付いたら表示(opacity:1; visibility:visible)されるようにします。

閉じるボタン（.close-btn）は、50pxの高さ・幅にして、クリックしやすい大きさにしておきます。

これをしないと、クリック・タッチがしづらいですので。

JavaScript

window.onload = function() {
  var popup = document.getElementById('js-popup');
  if(!popup) return;
  popup.classList.add('is-show');

  var blackBg = document.getElementById('js-black-bg');
  var closeBtn = document.getElementById('js-close-btn');

  closePopUp(blackBg);
  closePopUp(closeBtn);

  function closePopUp(elem) {
    if(!elem) return;
    elem.addEventListener('click', function() {
      popup.classList.remove('is-show');
    })
  }
}

window.onload = function() { … } は、ページが読み込まれたらコードを実行するための記述です。

モーダルの画像が読み込まれてから表示させる方が良い感じですからね。

最初に.is-showというクラスを付与して、閉じるボタンか黒い背景がクリックされたらモーダルを非表示にするようにしています。

黒背景クリックで閉じれるようにした方が、ユーザーに優しいでしょう。

.classListは使用頻度の高いメソッドなので、覚えておきましょう。

ボタンをクリックしたら表示されるモーダル（ポップアップ）

DEMO

あらかじめCSSの前にFontAwesome アイコンを呼び出してください。

<link href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" rel="stylesheet">

FontAwesomeアイコンって何？という人は、こちらの記事を読んでください。
FontAwesomeアイコンの使用方法

HTML

<div class="popup" id="js-popup">
  <div class="popup-inner">
    <div class="close-btn" id="js-close-btn"><i class="fas fa-times"></i></div>
    <a href="#"><img src="./img/popup.jpg" alt="ポップアップ画像"></a>
  </div>
  <div class="black-background" id="js-black-bg"></div>
</div>

<button id="js-show-popup">Show Popup</button>

先ほどのコードとほとんど同じで、表示を切り替えるボタンがあるという違いだけです。

CSS

.popup {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: .6s;
}
.popup.is-show {
  opacity: 1;
  visibility: visible;
}
.popup-inner {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  width: 80%;
  max-width: 600px;
  padding: 50px;
  background-color: #fff;
  z-index: 2;
}
.popup-inner img {
  width: 100%;
}
.close-btn {
  position: absolute;
  right: 0;
  top: 0;
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  cursor: pointer;
}
.close-btn i {
  font-size: 20px;
  color: #333;
}
.black-background {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,.8);
  z-index: 1;
  cursor: pointer;
}

こちらはパターン１と同じなので、説明は省きます。

JavaScript

function popupImage() {
  var popup = document.getElementById('js-popup');
  if(!popup) return;

  var blackBg = document.getElementById('js-black-bg');

  var blackBg = document.getElementById('js-black-bg');
  var closeBtn = document.getElementById('js-close-btn');
  var showBtn = document.getElementById('js-show-popup');

  closePopUp(blackBg);
  closePopUp(closeBtn);
  closePopUp(showBtn);
  function closePopUp(elem) {
    if(!elem) return;
    elem.addEventListener('click', function() {
      popup.classList.toggle('is-show');
    });
  }
}
popupImage();

割とシンプルに実装できます。

コード全体を関数にしているのは、変数が他のコードに影響が出ないようにするためです。

button要素ではなく画像（img要素）にして、拡大画像が表示されるような使い方もできますね。

まとめ

モーダルは広告や画像表示によく使われるので、サクっと作れるようにしておきましょう。