背景をぼかして表示するモーダルウインドウの作り方【HTML/CSS/JavaScript・サンプルコード付き】

背景をぼかして表示するモーダルウインドウの作り方

背景をぼかして表示するモーダルウインドウの作り方を紹介します。このサンプルでは、「モーダルを開く」ボタンをクリックすると画面中央にモーダルウインドウを表示し、同時に背後のページ内容へぼかしを加えます。背景の文字やコンテンツをぼかすことで、表示されたモーダルを周囲から区別しやすくできます。

お知らせ、確認メッセージ、案内など、現在のページ上へ情報を重ねて表示したい場面に利用できます。「モーダルを開く」をクリックすると背景がぼかされた状態でモーダルが表示され、モーダル内の「閉じる」ボタンをクリックすると元の表示へ戻ります。

HTMLではモーダル内のタイトルや文章、ボタンの文字を変更でき、CSSでは背景のぼかし具合、モーダルの横幅、余白、背景色、角丸、影などを調整できます。JavaScriptではボタンのクリックに合わせて表示状態と背景のぼかしを切り替えます。画面幅に合わせてモーダルが縮小するため、スマートフォン・タブレット・PCで利用できます。

コードについて 本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。

免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。

デモ

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

<!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>

  <!-- 背景ぼかしの対象となるページ内容 -->
  <main
    class="blur-background-modal-window_page"
    data-blur-background-modal-window-page>

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

      <!-- 操作エリアのタイトル -->
      <div class="blur-background-modal-window_title">
        背景をぼかして表示するモーダルウインドウ
      </div>

      <!-- 操作エリアの説明文 -->
      <p class="blur-background-modal-window_text">
        「モーダルを開く」をクリックすると、背景をぼかしながらモーダルウインドウを表示します。
      </p>

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

    </div>

  </main>

  <!-- モーダル表示エリア -->
  <div
    class="blur-background-modal-window_overlay"
    data-blur-background-modal-window-overlay
    aria-hidden="true">

    <!-- モーダルウインドウ本体 -->
    <div
      class="blur-background-modal-window_modal"
      role="dialog"
      aria-modal="true"
      aria-labelledby="blur-background-modal-window-title">

      <!-- モーダルのタイトル -->
      <div
        class="blur-background-modal-window_heading"
        id="blur-background-modal-window-title">
        お知らせ
      </div>

      <!-- モーダルの文章 -->
      <p class="blur-background-modal-window_message">
        背景をぼかして表示するモーダルウインドウです。
      </p>

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

    </div>

  </div>

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

</body>
</html>

/* すべての要素 */
*,
*::before,
*::after{
  box-sizing:border-box; /* paddingと枠線を要素サイズに含める */
}

/* ページ全体 */
body{
  margin:0; /* ブラウザ標準の外側余白をなくす */
  background:#ffffff; /* ページ全体の背景色 */
  color:#111827; /* ページ全体の基本文字色 */
  font-family:sans-serif; /* ページ全体のフォント */
}

/* 背景ぼかしの対象となるページ内容 */
.blur-background-modal-window_page{
  min-height:100vh; /* 最低でも画面の高さいっぱいに表示 */
  padding:40px 20px; /* 上下40px・左右20pxのページ余白 */
  transition:filter .3s ease; /* 0.3秒でぼかしを変化 */
}

/* モーダル表示中の背景 */
.blur-background-modal-window_page.is-blur{
  filter:blur(6px); /* 背景を6pxぼかす */
}

/* モーダルを開く操作エリア */
.blur-background-modal-window_wrap{
  width:100%; /* 画面幅に合わせて縮小する */
  max-width:700px; /* 操作エリアの最大横幅 */
  margin:40px auto; /* 上下40pxの余白を付けて左右中央へ配置 */
  padding:32px; /* 操作エリア内側の余白 */
  border:1px solid #e5e7eb; /* 操作エリアの枠線 */
  border-radius:18px; /* 操作エリアの角丸 */
  background:#f8fafc; /* 操作エリアの背景色 */
  text-align:center; /* 内容を中央揃え */
}

/* 操作エリアのタイトル */
.blur-background-modal-window_title{
  margin:0 0 12px; /* 下側12pxの余白 */
  color:#111827; /* タイトルの文字色 */
  font-size:22px; /* タイトルの文字サイズ */
  font-weight:700; /* タイトルを太字にする */
  line-height:1.5; /* タイトルの行間 */
}

/* 操作エリアの説明文 */
.blur-background-modal-window_text{
  margin:0 0 24px; /* 下側24pxの余白 */
  color:#4b5563; /* 説明文の文字色 */
  font-size:16px; /* 説明文の文字サイズ */
  line-height:1.8; /* 説明文の行間 */
}

/* モーダルを開くボタン */
.blur-background-modal-window_open{
  padding:12px 26px; /* ボタン内側の上下・左右余白 */
  border:none; /* ボタンの枠線を非表示 */
  border-radius:8px; /* ボタンの角丸 */
  background:#2563eb; /* ボタンの背景色 */
  color:#ffffff; /* ボタンの文字色 */
  font-size:16px; /* ボタンの文字サイズ */
  font-weight:700; /* ボタン文字を太字にする */
  line-height:1.5; /* ボタン文字の行間 */
  cursor:pointer; /* マウスカーソルを指型へ変更 */
}

/* モーダル表示エリア */
.blur-background-modal-window_overlay{
  display:none; /* 初期状態では非表示 */
  position:fixed; /* ブラウザ画面へ固定 */
  inset:0; /* 上下左右を0にして画面全体へ広げる */
  z-index:9999; /* 他の要素より前面へ表示 */
  align-items:center; /* モーダルを縦方向中央へ配置 */
  justify-content:center; /* モーダルを横方向中央へ配置 */
  padding:20px; /* 画面端とモーダルの間隔 */
  background:rgba(255,255,255,.15); /* モーダル表示エリアの半透明背景 */
}

/* モーダルの表示状態 */
.blur-background-modal-window_overlay.is-active{
  display:flex; /* モーダルを表示 */
}

/* モーダルウインドウ本体 */
.blur-background-modal-window_modal{
  width:100%; /* 画面幅に合わせて縮小する */
  max-width:440px; /* モーダルの最大横幅 */
  padding:36px 30px 30px; /* モーダル内側の余白 */
  border-radius:18px; /* モーダルの角丸 */
  background:#ffffff; /* モーダルの背景色 */
  color:#111827; /* モーダルの基本文字色 */
  text-align:center; /* 内容を中央揃え */
  box-shadow:0 24px 60px rgba(15,23,42,.25); /* モーダルの影 */
}

/* モーダルのタイトル */
.blur-background-modal-window_heading{
  margin:0 0 16px; /* 下側16pxの余白 */
  color:#111827; /* タイトルの文字色 */
  font-size:28px; /* タイトルの文字サイズ */
  font-weight:700; /* タイトルを太字にする */
  line-height:1.5; /* タイトルの行間 */
}

/* モーダルの文章 */
.blur-background-modal-window_message{
  margin:0; /* 外側余白をなくす */
  color:#4b5563; /* 文章の文字色 */
  font-size:16px; /* 文章の文字サイズ */
  line-height:1.8; /* 文章の行間 */
}

/* モーダルを閉じるボタン */
.blur-background-modal-window_button{
  width:100%; /* モーダルの横幅いっぱいに表示 */
  margin-top:28px; /* 上側28pxの余白 */
  padding:12px; /* ボタン内側の余白 */
  border:none; /* ボタンの枠線を非表示 */
  border-radius:8px; /* ボタンの角丸 */
  background:#2563eb; /* ボタンの背景色 */
  color:#ffffff; /* ボタンの文字色 */
  font-size:16px; /* ボタンの文字サイズ */
  font-weight:700; /* ボタン文字を太字にする */
  line-height:1.5; /* ボタン文字の行間 */
  cursor:pointer; /* マウスカーソルを指型へ変更 */
}

/* 画面幅640px以下 */
@media(max-width:640px){

  /* スマートフォン用のページ内容 */
  .blur-background-modal-window_page{
    padding:24px 12px; /* ページ余白を縮小 */
  }

  /* スマートフォン用の操作エリア */
  .blur-background-modal-window_wrap{
    margin:24px auto; /* 上下余白を24pxへ変更 */
    padding:24px 18px; /* 内側余白を縮小 */
  }

  /* スマートフォン用のモーダル */
  .blur-background-modal-window_modal{
    padding:32px 18px 20px; /* 内側余白を縮小 */
  }

}

// 背景ぼかしの対象となるページ内容を取得
const blurBackgroundModalWindowPage=document.querySelector(
  "[data-blur-background-modal-window-page]"
);

// モーダルを開くボタンを取得
const blurBackgroundModalWindowOpen=document.querySelector(
  "[data-blur-background-modal-window-open]"
);

// モーダルを閉じるボタンを取得
const blurBackgroundModalWindowClose=document.querySelector(
  "[data-blur-background-modal-window-close]"
);

// モーダル表示エリアを取得
const blurBackgroundModalWindowOverlay=document.querySelector(
  "[data-blur-background-modal-window-overlay]"
);

// モーダルを開くボタンをクリックした時
blurBackgroundModalWindowOpen.addEventListener("click",function(){

  // ページ内容へ背景ぼかし用クラスを追加
  blurBackgroundModalWindowPage.classList.add("is-blur");

  // モーダル表示エリアへ表示用クラスを追加
  blurBackgroundModalWindowOverlay.classList.add("is-active");

  // モーダルが表示中であることを支援技術へ伝える
  blurBackgroundModalWindowOverlay.setAttribute("aria-hidden","false");

});

// モーダルを閉じるボタンをクリックした時
blurBackgroundModalWindowClose.addEventListener("click",function(){

  // ページ内容から背景ぼかし用クラスを削除
  blurBackgroundModalWindowPage.classList.remove("is-blur");

  // モーダル表示エリアから表示用クラスを削除
  blurBackgroundModalWindowOverlay.classList.remove("is-active");

  // モーダルが非表示であることを支援技術へ伝える
  blurBackgroundModalWindowOverlay.setAttribute("aria-hidden","true");

});

コードをコピーする場合 使用するコードのタブを選び、「このタブをコピー」をクリックすると、現在表示中のコードをコピーできます。
サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。

ファイル構成と設置方法

このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLではモーダルウインドウを開くボタンとモーダル内の表示内容を作成します。CSSではページ全体の背景ぼかし、モーダルの横幅や余白、背景色、角丸、影などを設定します。JavaScriptではボタンのクリックに合わせて背景をぼかし、モーダルウインドウの表示・非表示を切り替えます。

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

各ファイルの役割
index.htmlはモーダルウインドウ全体を構成するファイルです。ページ内のタイトルや説明文、「モーダルを開く」ボタン、モーダル内のタイトル、文章、「閉じる」ボタンなどの表示内容を変更できます。

style.cssはページ内容とモーダルウインドウのデザインを設定するファイルです。背景のぼかし具合、案内エリアの横幅や余白、モーダルの横幅、背景色、角丸、影、文字サイズ、ボタンの色などを変更できます。

script.jsはモーダルウインドウの表示状態を切り替えるファイルです。「モーダルを開く」ボタンをクリックするとページ内容へぼかし用のクラスを追加してモーダルを表示し、「閉じる」ボタンをクリックすると背景のぼかしとモーダル表示を解除します。

設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを配置します。3つのファイルを同じ階層へ保存したあと、sample/index.htmlをブラウザで開いてください。「モーダルを開く」ボタンをクリックすると、ページ内容がぼかされてモーダルウインドウが表示されます。モーダル内の「閉じる」ボタンをクリックするとモーダルが閉じ、背景のぼかしも解除されます。

カスタマイズできる内容
index.htmlではページ内のタイトル、説明文、開くボタンの文字、モーダル内のタイトル、説明文、閉じるボタンの文字を変更できます。お知らせ、確認画面、案内メッセージなど、表示したい内容に合わせて文章を書き換えられます。

style.cssでは背景のぼかし具合、案内エリアの最大横幅、余白、背景色、角丸、モーダルの横幅、内側余白、背景色、影、文字サイズ、ボタンの色や角丸などを変更できます。背景のぼかしはfilter:blur(6px);で設定しているため、この値を変更することでぼかしの強さを調整できます。

数値調整
style.css
filter:blur(6px);
モーダルウインドウを表示したときの背景のぼかし具合です。6pxを大きくすると背景が強くぼかされ、小さくするとぼかしが弱くなります。

transition:filter .3s ease;
背景のぼかしが切り替わる時間です。0.3秒で変化します。値を大きくするとゆっくり、小さくすると速く切り替わります。

max-width:700px;
モーダルを開く案内エリアの最大横幅です。値を大きくすると横に広がり、小さくするとコンパクトになります。

margin:40px auto;
案内エリアの上下余白です。40pxを大きくすると上下の間隔が広がり、小さくすると狭くなります。

padding:32px;
案内エリアの内側余白です。値を大きくすると内容と枠線の間隔が広がり、小さくすると詰まった表示になります。

border-radius:18px;
案内エリアの角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。

font-size:22px;
案内エリアのタイトルの文字サイズです。値を大きくすると文字が大きくなり、小さくすると控えめになります。

margin:0 0 24px;
案内エリアの説明文の下側余白です。24pxを大きくすると開くボタンとの間隔が広がり、小さくすると狭くなります。

padding:12px 24px;
「モーダルを開く」ボタンの内側余白です。上下の12pxを大きくするとボタンが高くなり、左右の24pxを大きくすると横に広がります。

border-radius:8px;
ボタンの角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。

max-width:440px;
モーダルウインドウの最大横幅です。値を大きくするとモーダルが横に広がり、小さくするとコンパクトになります。

padding:36px 30px 30px;
モーダルウインドウの内側余白です。上側36px、左右30px、下側30pxの余白を設定しています。値を大きくすると内容とモーダル端の間隔が広がります。

box-shadow:0 24px 60px rgba(15,23,42,.3);
モーダルウインドウの影です。24pxや60pxを変更すると影の位置や広がりを調整でき、透明度の0.3を変更すると影の濃さを調整できます。

font-size:28px;
モーダル内のタイトルの文字サイズです。値を大きくするとタイトルが大きくなり、小さくすると控えめになります。

margin-top:28px;
モーダル内の説明文と「閉じる」ボタンの間隔です。28pxを大きくすると間隔が広がり、小さくすると狭くなります。

レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssで案内エリアとモーダルウインドウにwidth:100%とmax-widthを設定し、画面幅に合わせて縮小できるようにしています。また、640px以下ではページ内容や案内エリア、モーダルウインドウの余白を小さくするメディアクエリを設定しているため、スマートフォン・タブレット・PCで利用できます。