巷でよく見るイメージモーダル（画像表示→非表示）をTypeScriptで作ってみた

LPやサイトコンテンツでもモーダル機能はよく利用されています。
JavaScriptでの実装例はQiitaを含めネットでも多く記事がありますが、TypeScriptでの実装例は少なかったのでまとめてみました。

機能としては以下の内容になります。

ページ読み込み時にモーダル画像が表示※今回はpixabayからフリー素材を転用
メインコンテンツが透けて見える
画像 or グレーアウトした背景部分をクリックすると画像が非表示になる

環境構築

今回はyarnとViteを使って構築しております。

Viteに関しては詳細は割愛しますが開発効率面でざっくり以下のメリットがあるようです。

Goで書かれたesbuildを利用して依存関係の事前ビルドを行う（JavaScript ベースよりも 10 倍から 100 倍高速）
Native ESM（ビルド後にもES Modulesが利用される）を利用することでブラウザ側でimport/exportを解析できるためバンドルが不要になる。

お手元でTypeScriptが動く環境であれば特に環境構築部分は飛ばして頂いて問題ありません。

npmを確認

# node.jsのバージョンを確認
node -v

# npmのバージョンを確認
npm -v

npm 経由でyarnをインストール

# npm 経由でyarnをインストール
npm install -g yarn

# yarnのバージョンを確認
yarn -v

# yarnの初期設定
yarn init

ViteでTypeScriptプロジェクト作成

yarn create vite

TypeScriptを選択

? Project name: › hello-vite # (1)プロジェクト名を入力
? Select a framework: › - Use arrow-keys. Return to submit.
❯   vanilla # (2)フレームワークを選択（vanilla = フレームワークを使わない）
    vue
    react
    preact
    lit-element
    svelte
? Select a variant: › - Use arrow-keys. Return to submit.
    vanilla 
❯   vanilla-ts # (3)TypeScriptを選択

nodeパッケージをインストール

yarn install

モーダル部分

実装部分は以下の通りです。

index.htmlに予めモーダルを画像を用意（visibility: hidden;で非表示）
ユーザーのクリックイベントでvisibility: visible;をつけて表示する

main.ts

import './style.css'

// ページが読み込まれたタイミングで実行
window.onload = () => {
  const popup = document.getElementById('popup') as HTMLDivElement | null;

  // モーダル画像表示
  popup!.classList.add('show');

  // 各要素取得
  const blackBg = document.getElementById('modalBackground') as HTMLDivElement | null;
  const modalWindow = document.getElementById('modalWindow') as HTMLDivElement | null;

  // 各要素にイベントを設定
  closePopUp(blackBg);
  closePopUp(modalWindow);

  // クリック発生でモーダル画像を非表示にする
  function closePopUp(elem: HTMLElement | null) {
    if (!elem) return;
    elem.addEventListener('click', () => {
      popup?.classList.remove('show');
    });
  }
}

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="favicon.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite App</title>
  </head>
  <body>
    <div id="app">
    <h1>にゃんこ画像のモーダルサンプル</h1>
    <p>にゃんこ。にゃんこ。にゃんこ。にゃんこ。にゃんこ。にゃんこ。</p>
    <p>にゃんこ。にゃんこ。にゃんこ。にゃんこ。にゃんこ。にゃんこ。</p>
    <p>にゃんこ。にゃんこ。にゃんこ。にゃんこ。にゃんこ。にゃんこ。</p>
    </div>
    </div>
    <!-- モーダル画像部分はじまり -->
    <div class="popup" id="popup">
      <div class="modalWindow" id="modalWindow">
        <!-- 任意のモーダル画像を設定 -->
        <img src="https://cdn.pixabay.com/photo/2014/04/13/20/49/cat-323262_960_720.jpg" alt="フリー素材の猫画像">
      </div>
      <div class="modalWrapper" id="modalBackground"></div>
    </div>
    <!-- モーダル画像部分おわり -->
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>

style.css

.popup {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: .6s;
  }

  /* クリックイベントでこのスタイルを取り除く */
  .popup.show {
    opacity: 1;
    visibility: visible;
  }
  
  .modalWrapper {
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, .7);
    position: fixed;
    z-index: 5;
    cursor: pointer;
  }
  .modalWindow {
    width: 750px;
    height: 460px;
    z-index: 20;
    position: absolute;
    top: 50%;
    left: 50%;
    transform : translate(-50%, -50%);
    cursor: pointer;
  }
  
  .modalWindow img {
    width: 100%;
    height: auto;
  }

ローカルサーバー起動で確認

yarn dev

yarn vite

参考

主に環境構築で参考にしました。

TypeScriptでモーダル（ポップアップ画像）を実装する方法