モーダルウインドウ表示時に背景をぼかす方法【HTML/CSS/JavaScript・サンプルコード付き】

モーダルウインドウ

モーダルウインドウ表示時に背景をぼかす方法

モーダルウインドウ表示時に背景をぼかす方法を紹介します。モーダルを開いた際に背面コンテンツへぼかし効果を適用することで、ユーザーの視線をモーダルへ集めやすくできるサンプルです。HTML・CSS・JavaScriptのみで実装できるため、一般的なWebサイトや管理画面へ簡単に導入できます。

サンプルではモーダルを開くと背景全体へぼかし効果を適用し、モーダルを閉じると元の表示へ戻ります。背景クリックや閉じるボタンにも対応しており、自然な操作感で利用できます。ダイアログや確認画面、お知らせ表示など、ユーザーへ注目してほしい情報を表示する場面に適しています。

ぼかしの強さや背景色、モーダルサイズ、ボタンデザインなどはコード内から自由に変更できます。お問い合わせ画面、会員サイト、管理画面、ECサイトなど、視認性を高めたいモーダルウインドウへ応用しやすい構成です。

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

デモ

背景ぼかしモーダル

モーダル表示中は背景へぼかし効果が適用されます。

モーダル表示中

背景へぼかし効果を適用しています。
「閉じる」を押すと元へ戻ります。

「モーダルを開く」をクリックすると背景へぼかし効果を適用した状態でモーダルウインドウが表示されます。背景または「閉じる」をクリックすると元の表示へ戻ります。

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

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

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

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

  <!-- ページタイトル -->
  <title>モーダルウインドウ表示時に背景をぼかす</title>

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

</head>
<body>

  <!-- 背景として表示するメインコンテンツ -->
  <div class="blur-background-modal_wrap" data-blur-background-modal-content>

    <!-- 操作エリアのタイトル -->
    <div class="blur-background-modal_title">
      背景ぼかしモーダル
    </div>

    <!-- 操作エリアの説明文 -->
    <p class="blur-background-modal_text">
      モーダル表示中は背景へぼかし効果が適用されます。
    </p>

    <!-- モーダルを開くボタン -->
    <button
      class="blur-background-modal_button"
      type="button"
      data-blur-background-modal-open>
      モーダルを開く
    </button>

  </div>

  <!-- モーダル背景 -->
  <div
    class="blur-background-modal_overlay"
    data-blur-background-modal-overlay>

    <!-- モーダル本体 -->
    <div
      class="blur-background-modal_modal"
      role="dialog"
      aria-modal="true"
      aria-labelledby="blur-background-modal-title">

      <!-- モーダルタイトル -->
      <div
        class="blur-background-modal_heading"
        id="blur-background-modal-title">
        モーダル表示中
      </div>

      <!-- モーダルの説明文 -->
      <p class="blur-background-modal_message">
        背景へぼかし効果を適用しています。<br>
        「閉じる」を押すと元へ戻ります。
      </p>

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

    </div>

  </div>

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

</body>
</html>

ファイル構成と設置方法

このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLには背景コンテンツとモーダルウインドウの構造、CSSには背景ぼかしやモーダルのデザイン、JavaScriptにはモーダルの開閉と背景ぼかしの切り替え処理を記述しています。モーダル表示中だけ背景へぼかし効果を適用し、閉じると元の表示へ戻る構成になっています。 

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

各ファイルの役割
index.html
背景として表示するコンテンツ、モーダルウインドウ、開閉ボタンなどのHTML構造を管理します。タイトルや説明文、ボタン名などを自由に変更できます。

style.css
背景ぼかし、モーダルのデザイン、ボタン、余白、角丸、影などの見た目を管理します。ぼかしの強さやモーダルサイズもここで調整できます。

script.js
モーダルの表示・非表示と、背景へぼかし用クラスを追加・削除する処理を管理します。

設置方法・使い方
sampleフォルダへindex.html・style.css・script.jsを配置します。sample/index.htmlをブラウザで開くと動作を確認できます。「モーダルを開く」をクリックするとモーダルウインドウが表示され、背景へぼかし効果が適用されます。「閉じる」または背景部分をクリックするとモーダルが閉じ、背景も元の状態へ戻ります。

カスタマイズできる内容
index.htmlではタイトル、説明文、ボタン名、モーダル内の文章を変更できます。style.cssでは背景色、モーダルサイズ、ぼかしの強さ、ボタン色、余白、角丸、影などを変更できます。script.jsではモーダルを開閉するタイミングや、ぼかしを適用する対象要素を変更できます。

数値調整
style.cssのfilter:blur(6px);とbackdrop-filter:blur(6px);の6pxを変更すると背景のぼかしの強さが変わります。transition:.3s;の0.3秒を変更するとぼかしの切り替え速度が変わります。max-width:420px;を変更するとモーダルの最大横幅が変わります。padding:30px;を変更するとモーダル内部の余白が変わります。

レスポンシブ対応
style.cssではwidth:100%、max-width、padding、@media(max-width:640px)を使用してレスポンシブ対応しています。スマートフォンではモーダルの余白を自動調整し、タブレット・PCでも画面中央へ見やすく表示されます。

こちらもおすすめ

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

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

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

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

トップページで探す！

コメント