モーダルウインドウを画面中央で拡大表示する方法【HTML/CSS/JavaScript・サンプルコード付き】

html/css/js

モーダルウインドウを画面中央で拡大表示する方法

HTML、CSS、JavaScriptを使って、画面中央へ拡大しながら表示されるモーダルウインドウを作る方法を紹介します。クリック時のアニメーションを追加して見栄えを向上させたい場合や、お知らせ、確認画面、画像表示、メニュー画面などを自然な演出で表示したい場合に利用できます。

関連記事：
・モーダルウインドウのアニメーション5選 vol.1
・モーダルウインドウのアニメーション5選 vol.2
・全画面オーバーレイ型モーダルウインドウの作り方
コードについて 本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。

デモ

画面中央で拡大表示するモーダル

画像をクリックすると、画面中央に拡大表示されます。

コードをコピーして使おう！

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

  <meta charset="UTF-8">

  <!-- ページタイトル -->
  <title>モーダルウインドウを画面中央で拡大表示</title>

  <!-- CSS読み込み -->
  <link rel="stylesheet" href="style.css">

</head>
<body>

  <!-- デモエリア -->
  <div class="center-zoom-modal-window_wrap">

    <div class="center-zoom-modal-window_title">
      画面中央で拡大表示するモーダル
    </div>

    <p class="center-zoom-modal-window_text">
      画像をクリックすると、画面中央に拡大表示されます。
    </p>

    <!-- 拡大表示する画像ボタン -->
    <button class="center-zoom-modal-window_open" type="button" data-zoom-open>
      <img src="https://picsum.photos/seed/gal1/600/400" alt="森と湖（サンプル1）">
    </button>

  </div>

  <!-- モーダル全体 -->
  <div class="center-zoom-modal-window_overlay" data-zoom-overlay>

    <!-- 拡大表示するモーダル本体 -->
    <div class="center-zoom-modal-window_modal" role="dialog" aria-modal="true">

      <!-- モーダルを閉じるボタン -->
      <button class="center-zoom-modal-window_close" type="button" data-zoom-close aria-label="閉じる">
        ×
      </button>

      <img src="https://picsum.photos/seed/gal1/600/400" alt="森と湖（サンプル1）">

    </div>

  </div>

  <!-- JavaScript読み込み -->
  <script src="script.js"></script>

</body>
</html>

ファイル構成と設置方法

このサンプルは、HTML・CSS・JavaScriptをそれぞれ別ファイルに分けて使用します。index.html、style.css、script.js を同じフォルダに配置してください。 

sample/
├── index.html
├── style.css
└── script.js

index.html をブラウザで開くと、画像をクリックしてモーダルウインドウを画面中央で拡大表示できます。閉じるボタン、または外側の背景部分をクリックするとモーダルを閉じられます。

コメント