Javascriptを使用してポップアップを自作する方法

概要

Javascriptを使用してポップアップを自作する方法です。

サンプル

今回作成するのは、

• ボタンをクリックしてポップアップを表示
• ポップアップの「×」ボタンをクリックしてポップアップを閉じる
• オーバレイをクリックしてポップアップを閉じる

See the Pen Untitled by take it easy (@take-it-easy) on CodePen.

コーディング方法

HTML

<!-- ポップアップを開くボタン -->
<div class="popup-open">
  <a href="javascript:popup_open();">ポップアップを表示します。</a>
</div>
<!-- ポップアップ -->
<div id="popup-overlay">
  <div class="popup-window">
    <div class="popup-header">
      <h2>ポップアップの見出し</h2>
      <div class="popup-close">
        <a href="javascript:popup_close();">×</a>
      </div>
    </div>
    <div class="popup-body">
      <p>※ポップアップに表示する内容はこちらに記述します。</p>
    </div>
  </div>
</div>

CSS

/* リンクの共通レイアウト */
a {
  text-decoration: none;
  color: #000;
}

/* ポップアップを開くの擬似ボタン */
.popup-open a {
  display: block;
  text-align: center;
  border: 1px solid #000;
  width: 250px;
  padding: 10px;
  margin: 0 auto;
}

/* ポップアップが開いた時のオーバレイ */
#popup-overlay {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.3);
}

/* ポップアップ */
.popup-window {
  width: 500px;
  height: 300px;
  background-color: #fff;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 10px;
}

/* ポップアップのヘッダー */
.popup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
  background-color: rgba(0, 0, 0, .1);
  border-radius: 10px 10px 0 0;
}

/* ポップアップの見出し */
.popup-header h2 {
  font-size: 16px;
  font-weight: normal;
  margin: 0;
  padding: 0;
}

/* ポップアップの内容 */
.popup-body {
  padding: 0 10px;
}

JavaScript

/* ページが開いた時 */
window.onload = function () {
  // ポップアップを表示しない
  popup_close();
};

/* ポップアップを開く */
function popup_open() {
  var popup = document.getElementById('popup-overlay');
  popup.style.display ="block";
}

/* ポップアップを閉じる */
function popup_close() {
  var popup = document.getElementById('popup-overlay');
  popup.style.display ="none";
}

/* クリックイベントの登録 */
addEventListener('click', overlay_popup_close);

/* タップイベントの登録 */
addEventListener('touchstart', overlay_popup_close);

/* オーバレイをクリックした時、ポップアップを閉じる */
function overlay_popup_close(e) {
  var popup = document.getElementById('popup-overlay');
  if (e.target == popup) {
    popup.style.display = 'none';
  }
}