コピペで完結！モーダルウインドウ#07【全画面オーバーレイ型】

html/css/js

全画面オーバーレイ型モーダル

本記事で扱う「オーバーレイ」とは、画面全体を半透明で覆うレイヤーのことです。背後のページを暗くして操作を一時的に無効化し、手前のモーダルに注意を集中させる目的で使われます。

ここでは、そのオーバーレイ上に中央配置のモーダルパネルを表示する「全画面オーバーレイ型モーダル」を実装します。背景クリックやEscキーで閉じられるほか、モーダルが開いている間は 背景ページのスクロールも禁止されるので、ユーザーは完全にモーダルに集中できます。

フォーカス復帰などのアクセシビリティにも配慮しており、デモとHTML/CSS/JSのコードを掲載。コピペでそのまま導入できます。

コードについて 本記事のコードは AI（ChatGPT）による生成をベースに作成・調整しています。ご利用の環境でテストの上ご使用ください。
免責 本コードの利用に伴う不具合・損害について、当サイトは責任を負いません。自己責任にてご利用ください。

デモ

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

/* =========================================
   モーダル #07 全画面オーバーレイ型 CSS
   ========================================= */

/* --- 開くボタン --- */
button[data-modal-open="#modal07"]{
  appearance:none;             /* ブラウザ既定装飾を消去 */
  padding:10px 14px;           /* ボタン内余白 */
  border:1px solid #e5e7eb;    /* 薄い枠線 */
  border-radius:10px;          /* 角丸デザイン */
  background:#0b6bff;          /* 青背景 */
  color:#fff;                  /* 白文字 */
  cursor:pointer;              /* マウスカーソルをポインタに */
}
/* フォーカス時の見た目（キーボード操作向け） */
button[data-modal-open="#modal07"]:focus-visible{
  outline:2px solid #0b6bff;
  outline-offset:2px;
}

/* --- モーダル全体 --- */
#modal07{
  position:fixed; inset:0;     /* 画面全体に固定配置 */
  z-index:100;                 /* 前面に表示 */
  display:none;                /* 初期は非表示 */
}
/* JSで is-open が付くと表示される */
#modal07.is-open{display:block;}

/* --- 背景オーバーレイ --- */
#modal07 .modal-backdrop{
  position:absolute; inset:0;            /* 全画面に広がる */
  background:rgba(15,23,42,.6);          /* 半透明の黒背景 */
  border:none;
  cursor:pointer;                        /* クリック可能 */
  opacity:0;                             /* 初期は透明 */
  transition:opacity .25s ease;          /* フェードアニメ */
}
#modal07.is-open .modal-backdrop{
  opacity:1; /* 表示時はフェードイン */
}

/* --- パネル本体 --- */
#modal07 .modal-panel{
  position:absolute; inset:0;
  margin:auto;                           /* 中央寄せ */
  max-width:600px; max-height:400px;     /* サイズ上限 */
  background:#fff;                       /* 白背景 */
  border-radius:14px;                    /* 角丸 */
  box-shadow:0 10px 30px rgba(0,0,0,.2); /* 影 */
  opacity:0; transform:scale(.9);        /* 初期は縮小＆透明 */
  transition:all .3s ease;               /* アニメ */
  display:flex; flex-direction:column;
}
#modal07.is-open .modal-panel{
  opacity:1; transform:scale(1); /* 表示時：拡大＆不透明 */
}

/* --- ヘッダー --- */
#modal07 .modal-head{
  display:flex;
  justify-content:space-between; /* タイトルと閉じるボタンを両端に配置 */
  align-items:center;
  padding:12px 16px;
  border-bottom:1px solid #e5e7eb;
}
#modal07 .modal-title{
  margin:0; font-size:16px; color:#0f172a;
}
#modal07 .modal-close{
  padding:6px 10px;
  font-size:12px;
  border:1px solid #e5e7eb;
  border-radius:8px;
  background:#fff;
  cursor:pointer;
}

/* --- 本文 --- */
#modal07 .modal-body{
  padding:16px;
  flex:1;                  /* 高さは残りを自動で埋める */
  overflow:auto;           /* 本文が長ければスクロール */
  font-size:14px;
  line-height:1.8;
  color:#334155;
}

/* --- 背景スクロール禁止 --- */
body.modal-open{
  overflow:hidden; /* モーダル表示中は背景スクロール不可 */
}

コメント