背景を暗くしないモーダルウインドウの作り方
背景を暗くしないモーダルウインドウの作り方を紹介します。一般的なモーダルウインドウでは背景を半透明の黒色で覆うことが多いですが、このサンプルでは背景を暗くせず、そのままの状態でモーダルだけを表示します。HTML・CSS・JavaScriptだけで実装しているため、外部ライブラリを使用せずにシンプルな構成で導入できます。
サンプルコードでは、「モーダルを開く」ボタンをクリックすると画面中央にモーダルウインドウが表示されます。背景にはオーバーレイを表示しないため、ページ全体の見た目を変えずに情報を表示できます。「閉じる」ボタンをクリックするとモーダルは非表示になります。構成をシンプルにしているため、必要に応じてデザインや表示内容を自由にカスタマイズできます。
管理画面の補足情報や操作ガイド、ダッシュボードのお知らせ、小規模な設定画面など、背景を暗くせずに案内だけを表示したい場面で活用できます。モーダル内のタイトルや本文はHTMLで変更でき、色・サイズ・余白・角丸・影などはCSSから調整できます。背景をそのまま表示するモーダルウインドウを実装したい場合の基本サンプルとして利用しやすい構成です。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
「モーダルを開く」をクリックすると背景を暗くせずにモーダルが表示されます。
コードをコピーして使おう！
<!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="modal-window-no-overlay_wrap">
<!-- タイトル -->
<h1 class="modal-window-no-overlay_title">
背景を暗くしないモーダルウインドウ
</h1>
<!-- 説明文 -->
<p class="modal-window-no-overlay_text">
ボタンをクリックすると背景を暗くせずにモーダルウインドウを表示します。
</p>
<!-- モーダルを開くボタン -->
<button
class="modal-window-no-overlay_open"
type="button"
data-modal-open>
モーダルを開く
</button>
</div>
<!-- モーダル表示エリア -->
<div
class="modal-window-no-overlay_overlay"
data-modal-overlay>
<!-- モーダル本体 -->
<div
class="modal-window-no-overlay_modal"
role="dialog"
aria-modal="true"
aria-labelledby="modal-title">
<!-- モーダルタイトル -->
<h2
id="modal-title"
class="modal-window-no-overlay_modal-title">
モーダルタイトル
</h2>
<!-- モーダル本文 -->
<p class="modal-window-no-overlay_modal-text">
背景を暗くせずに表示するモーダルウインドウです。閉じるボタンをクリックするとモーダルを閉じます。
</p>
<!-- 閉じるボタン -->
<button
class="modal-window-no-overlay_close"
type="button"
data-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の3ファイルを配置します。
③ index.htmlをブラウザで開きます。
④ 「モーダルを開く」ボタンをクリックすると背景を暗くせずにモーダルが表示されます。
⑤ 「閉じる」ボタンをクリックするとモーダルを閉じます。
カスタマイズできる内容
・index.htmlでは、ボタンの文字・モーダルタイトル・本文などの表示内容を変更できます。
・style.cssでは、背景色・文字サイズ・余白・角丸・影・モーダルの横幅などのデザインを変更できます。
・style.cssでは、背景を暗くするオーバーレイを使用していないため、必要に応じて背景色を追加するなど自由にカスタマイズできます。
・script.jsでは、モーダルを開く・閉じるタイミングや処理内容を変更できます。
数値調整
・style.cssの「max-width:700px;」を変更するとデモ全体の横幅を調整できます。
・style.cssの「max-width:420px;」を変更するとモーダルの横幅を調整できます。
・style.cssの「padding:28px;」を変更するとモーダル内部の余白を調整できます。
・style.cssの「box-shadow:0 20px 40px rgba(0,0,0,.2);」を変更すると影の広がりや濃さを調整できます。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssで「width:100%;」「max-width:420px;」「box-sizing:border-box;」を設定しているため、スマートフォン・タブレット・PCでも画面幅に合わせてモーダルが表示されます。また、640px以下ではデモ全体の余白を調整し、小さな画面でも見やすいレイアウトになります。
コメント