URLハッシュで開けるモーダルウインドウの作り方【HTML/CSS/JavaScript・サンプルコード付き】

モーダルウインドウ

URLハッシュで開けるモーダルウインドウの作り方

URLハッシュで開けるモーダルウインドウの作り方を紹介します。URLの末尾にハッシュ（#modalなど）を付けることで、ページを開いたタイミングで指定したモーダルウインドウを自動表示できるサンプルです。HTML・CSS・JavaScriptだけで実装できるため、特別なライブラリを使わずに導入できます。

サンプルでは通常のボタンからモーダルを開くだけでなく、URLハッシュが指定されている場合にも同じモーダルを表示できます。共有用URLから特定のお知らせやログイン画面、キャンペーン案内などを直接表示したい場合にも利用できます。また、背景クリックや閉じるボタンでモーダルを閉じる基本的な操作にも対応しています。

モーダル内のタイトルや本文、ボタン名は自由に変更できます。お問い合わせ画面、会員サイト、管理画面、ECサイトなどで、特定の画面をURLから直接表示したい場面に活用しやすいサンプルです。

コードについて 本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。

デモ

URLハッシュ対応モーダル

ボタンをクリックするか、URL末尾へ「#modal」を付けてページを開くとモーダルを表示できます。

URLハッシュで表示

URLの末尾へ「#modal」を付けても、このモーダルを表示できます。

「モーダルを開く」をクリックするとURL末尾へ「#modal」が追加されてモーダルが表示されます。また、URLへ直接「#modal」を付けてアクセスした場合も同じモーダルを表示できます。

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

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

  <!-- 文字コード -->
  <meta charset="UTF-8">

  <!-- スマートフォン表示対応 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- ページタイトル -->
  <title>URLハッシュで開けるモーダルウインドウ</title>

  <!-- CSSファイルを読み込み -->
  <link rel="stylesheet" href="style.css">

</head>
<body>

  <!-- モーダルを開く操作エリア -->
  <div class="modal-url-hash_wrap">

    <!-- 操作エリアのタイトル -->
    <div class="modal-url-hash_title">
      URLハッシュ対応モーダル
    </div>

    <!-- 操作エリアの説明文 -->
    <p class="modal-url-hash_text">
      ボタンをクリックするか、URL末尾へ「#modal」を付けてページを開くとモーダルを表示できます。
    </p>

    <!-- モーダルを開くボタン -->
    <button
      class="modal-url-hash_button"
      type="button"
      data-modal-url-hash-open>
      モーダルを開く
    </button>

  </div>

  <!-- モーダル背景 -->
  <div
    class="modal-url-hash_overlay"
    data-modal-url-hash-overlay>

    <!-- モーダル本体 -->
    <div
      class="modal-url-hash_modal"
      role="dialog"
      aria-modal="true"
      aria-labelledby="modal-url-hash-title">

      <!-- モーダルタイトル -->
      <div
        class="modal-url-hash_heading"
        id="modal-url-hash-title">
        URLハッシュで表示
      </div>

      <!-- モーダルの説明文 -->
      <p class="modal-url-hash_message">
        URLの末尾へ「#modal」を付けても、このモーダルを表示できます。
      </p>

      <!-- モーダルを閉じるボタン -->
      <button
        class="modal-url-hash_close"
        type="button"
        data-modal-url-hash-close>
        閉じる
      </button>

    </div>

  </div>

  <!-- JavaScriptファイルを読み込み -->
  <script src="script.js"></script>

</body>
</html>

ファイル構成と設置方法

このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLにはモーダルウインドウの構造、CSSにはデザイン、JavaScriptにはURLハッシュの監視やモーダルの開閉処理を記述しています。URLの末尾に「#modal」が付いている場合は自動でモーダルを表示し、通常のボタン操作でも同じモーダルを開ける構成です。 

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

各ファイルの役割
index.html
モーダルウインドウ本体、説明文、開くボタン、閉じるボタンなどのHTML構造を管理します。タイトルや本文など表示内容を変更できます。

style.css
モーダルウインドウのサイズ、背景、余白、角丸、影、ボタンデザインなど見た目を管理します。

script.js
URLハッシュの追加・監視・削除、モーダルの開閉処理、ページ読み込み時の自動表示処理を管理します。

設置方法・使い方
sampleフォルダへindex.html・style.css・script.jsを配置します。sample/index.htmlをブラウザで開くと動作を確認できます。「モーダルを開く」をクリックするとURLへ「#modal」が追加されてモーダルが表示されます。また、URL末尾へ「#modal」を付けた状態でページを開いても自動的にモーダルが表示されます。

カスタマイズできる内容
index.htmlではモーダルタイトル、説明文、ボタン名を変更できます。style.cssではモーダルサイズ、背景色、ボタン色、余白、角丸、影などを変更できます。script.jsでは使用するハッシュ名や開閉タイミング、URL更新処理を編集できます。

数値調整
style.cssのmax-width:420px;を変更するとモーダルの最大横幅が変わります。padding:30px;を変更するとモーダル内部の余白が変わります。background:rgba(0,0,0,.55);の「.55」を変更すると背景の暗さが変わります。

レスポンシブ対応
style.cssではwidth:100%、max-width、padding、@media(max-width:640px)を使用してレスポンシブ対応しています。スマートフォン・タブレット・PCでも画面幅に合わせてモーダルサイズや余白が自動調整されます。

こちらもおすすめ

モーダルウインドウ
モーダルウインドウのサンプルコード一覧

この記事の他にも、コピペですぐ使える実用的なサンプルコードを掲載しています。デモを確認しながら、用途に合うコードを探せます。

その他のコードを探す
トップページ
コピペですぐ使えるサンプルコードを探す

実用的なサンプルコードをカテゴリ・新着記事・人気記事から探せます。用途に合ったコードを見つけて、そのままコピペで利用できます。

トップページで探す！

コメント