初めに

ボタンを押したら周りの背景が薄暗くなり、画面の真ん中に出てくるウィンドウが気になり、javascriptとcssを使って実装してみました。また、自分なりに学習し学んだ内容を記事にしてみました。

※内容に間違いなどがある場合はご指摘をよろしくお願いします。

モーダルとは

英語でmodal。「様式の」「形態の」の意味で、ボタンを押したらブラウザ上に現れるウィンドウのこと。閉じるボタンを押すまで他の操作ができなくなる画面のこと。

実装における主な概念

❶HTMLのタグとCSSのz-indexを利用し3つの層を作る
❷overlayという名前のタグを作り、ベースとなる画面を被せる薄暗いレイヤーを用意する
❸ボタンを押した時に画面の一番手前に出てくるmodalという名前のタグを作る。
❹hiddenというクラス名をmodalタグやoverlayタグにあらかじめ付けておく
❺cssでhiddenの属性を「display: none」にセットする
❻Javascriptでボタンを押した際に「hidden」タグを付けたり外したりする処理をする

３つのレイヤの構成

イメージとしてはベースがあってその上にoverlay、modalが重なる感じ。overlayとmodalはボタンを押したときに現れ、閉じるボタンを押すと隠れる。

HTML側の実装

modalとoverlayというクラス名を持つ２つのタグを用意します。また、２つのタグにはhiddenというクラス名を別途付けておきます。

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <link rel="stylesheet" href="style.css" />
  <title>モーダルウィンドウ</title>
</head>

<body>
  <div class="overlay hidden"></div> <!-- overlay -->

  <button class="show-modal">モーダルボタン</button> <!-- モーダルを表示されるボタン -->

  <div class="modal hidden">
    <!-- モーダル-->
    <button class="close-modal">&times;</button> <!-- モーダルを閉じるボタン -->
    <p>
      モダールウィンドウです。
    </p>
  </div>

  <script src="script.js"></script>
</body>

</html>

CSSの実装

* {                     /* ブラウザ全体の余白を消す */
  margin: 0;
  padding: 0;
}

body {
  font-family: sans-serif;
  height: 100vh;
  position: relative;      /* body要素にflexboxを指定する */
  display: flex;
  align-items: flex-start;
  justify-content: center;
  background: linear-gradient(to top left, #f76060, #ebd407);    /* body要素の背景をグラデーションにする */
}

.show-modal {
  font-size: 20px;      /* modalを開くボタン */
  font-weight: 600;
  padding: 10px 30px;
  border: none;
  margin-top: 100px;
  background-color: #fff;
  color: #444;
  border-radius: 20px;
  cursor: pointer;
}

.close-modal {
  position: absolute;              /* modalを閉じるボタン */
  top: 4px;
  right: 22px;
  font-size: 40px;
  color: #333;
  cursor: pointer;
  border: none;
  background: none;
}

p {
  font-size: 20px;
}

.hidden {
  display: none;            /* hiddenクラスが付与されている場合は表示させないようにする */
}

.modal {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 70%;
  color: rgb(255, 0, 0);
  background-color: white;
  padding: 6rem;
  border-radius: 5px;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.3);   /* modalに影を作る */
  z-index: 10;           /* z-indexでmodalを一番上に位置させる */
}

.overlay {
  position: absolute; /* overlayの絶対位置を左上を起点にし幅と高さを100%にする */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);    
  backdrop-filter: blur(3px); /* 一番下のbody領域をぼやかす */
  z-index: 5; /* z-indexの数字を0と10の間の数字にし、bodyとmodalの真ん中に位置させる */
}

bodyとmodal、overlayのz-indexをそれぞれ0,5,10にします。こうすることによってbody要素が一番下、その上にmodalウィンドウがあり、一番上がoverlayという層になります。また、hiddenクラスのdisplayをnoneにしておき、このクラスが付与された時に要素が見えないようにします。

Javascriptの実装

"use strict";

const modal = document.querySelector(".modal"); //modalを指定
const overlay = document.querySelector(".overlay"); //overlayを指定
const btnOpenModal = document.querySelector(".show-modal"); //modalを開くボタンを指定
const btnCloseModal = document.querySelector(".close-modal"); //modalを閉じるボタンを指定

//modalとoverlayのhiddenクラスを消す（modalとoverlayが見えるようにする）処理
const openModal = () => {
  modal.classList.remove("hidden");
  overlay.classList.remove("hidden");
};

//modalとoverlayのhiddenクラスを追加する（modalとoverlayが見えないようにする）処理
const closeModal = () => {
  modal.classList.add("hidden");
  overlay.classList.add("hidden");
};

//modalの開くボタンと閉じるボタンをクリックした時の処理
btnOpenModal.addEventListener("click", openModal);
btnCloseModal.addEventListener("click", closeModal);

modal,overlay,モーダルの開くボタン、閉じるボタンをquerySelectorで指定し、それぞれの要素にhiddenクラスを付けたり、外したりしています。また、addEventListenerでclickした場合にボタンの処理を行うようにしています。

結果物

①モーダルを開く前

②開いた場合

参考サイト

https://goworkship.com/magazine/modal-windows-mobileui/
https://developer.mozilla.org/ja/docs/Web/CSS/backdrop-filter