全画面オーバーレイ型モーダルウインドウの作り方
全画面オーバーレイ型モーダルウインドウをHTML・CSS・JavaScriptだけで作る方法を紹介します。モーダルを開くと画面全体を半透明のオーバーレイで覆い、その上にコンテンツを表示する基本的な実装です。背景を暗くすることでユーザーの視線をモーダルへ集中させることができ、重要なお知らせや確認画面などにも利用できます。
このサンプルでは、「モーダルを開く」ボタンをクリックすると全画面オーバーレイが表示され、その中央にモーダルウインドウが表示されます。「閉じる」ボタンをクリックするとモーダルを閉じるシンプルな構成となっているため、モーダルウインドウの基本的な仕組みを理解したい方にもおすすめです。
デザインや背景色、モーダルのサイズ、表示するタイトルや文章などは自由に変更できます。お問い合わせ画面、会員サイト、管理画面、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="fullscreen-overlay-modal-window_wrap">
<!-- タイトル -->
<h1 class="fullscreen-overlay-modal-window_title">
全画面オーバーレイ型モーダルウインドウ
</h1>
<!-- 説明文 -->
<p class="fullscreen-overlay-modal-window_text">
画面全体を覆うオーバーレイ付きモーダルを表示します。
</p>
<!-- モーダルを開くボタン -->
<button class="fullscreen-overlay-modal-window_open" type="button" data-modal-open>
モーダルを開く
</button>
</div>
<!-- モーダル背景 -->
<div class="fullscreen-overlay-modal-window_overlay" data-modal-overlay>
<!-- モーダル本体 -->
<div class="fullscreen-overlay-modal-window_modal" role="dialog" aria-modal="true" aria-labelledby="modal-title">
<!-- モーダルタイトル -->
<h2 id="modal-title" class="fullscreen-overlay-modal-window_modal-title">
モーダルタイトル
</h2>
<!-- モーダル本文 -->
<p class="fullscreen-overlay-modal-window_modal-text">
画面全体を半透明のオーバーレイで覆い、その上にモーダルウインドウを表示します。
</p>
<!-- モーダルを閉じるボタン -->
<button class="fullscreen-overlay-modal-window_close" type="button" data-modal-close>
閉じる
</button>
</div>
</div>
<!-- JavaScriptファイルを読み込み -->
<script src="script.js"></script>
</body>
</html>サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。 HTMLで画面全体を覆うオーバーレイ付きモーダルウインドウの構造を作成し、CSSでレイアウトやデザインを設定、JavaScriptでモーダルの表示・非表示を制御しています。 シンプルな構成のため、全画面オーバーレイ型モーダルウインドウの基本的な仕組みを学びながら、そのままWebサイトへ導入しやすいサンプルです。
sample/
├── index.html
├── style.css
└── script.js
各ファイルの役割
・index.html：モーダルウインドウ本体・タイトル・説明文・開くボタン・閉じるボタンなど、画面に表示するHTMLを記述します。
・style.css：画面レイアウト・背景色・ボタン・モーダルのサイズ・余白・角丸・影・全画面オーバーレイのデザインなど、見た目全体を設定します。
・script.js：「モーダルを開く」ボタンと「閉じる」ボタンのクリックイベントを処理し、モーダルの表示・非表示を切り替えます。
設置方法・使い方
① sampleフォルダを作成します。
② index.html・style.css・script.jsの3ファイルを配置します。
③ index.htmlをブラウザで開くとサンプルを確認できます。
④ 「モーダルを開く」ボタンをクリックすると画面全体を覆うオーバーレイ付きモーダルが表示され、「閉じる」ボタンをクリックするとモーダルが閉じます。
カスタマイズできる内容
・index.htmlでは、ボタンの文字・モーダルタイトル・説明文などの表示内容を自由に変更できます。
・style.cssでは、モーダルやボタンの色・背景色・余白・角丸・影・幅などのデザインを変更できます。
・style.cssの「max-width:460px;」を変更するとモーダルの横幅を調整できます。
・style.cssの「background:rgba(15,23,42,.75);」の「.75」を変更するとオーバーレイ背景の暗さを調整できます。値を大きくすると背景が暗くなり、小さくすると明るく表示されます。
・script.jsでは、モーダルを表示・非表示にする処理を変更できます。現在は「モーダルを開く」ボタンで表示し、「閉じる」ボタンで閉じるシンプルな構成です。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssで「width:100%;」「max-width:460px;」「padding:20px;」を設定しているため、画面サイズに応じてモーダルの幅や余白が自動的に調整されます。スマートフォン・タブレット・PCでも画面全体を覆うオーバーレイとモーダルを適切なサイズで表示できます。
コメント