閉じるボタンで閉じられるモーダルウインドウの作り方
閉じるボタンで閉じられるモーダルウインドウの作り方を紹介します。このサンプルでは、「モーダルを開く」ボタンをクリックすると画面全体へ半透明のオーバーレイが表示され、その中央にモーダルウインドウが開きます。モーダル内に配置した「閉じる」ボタンをクリックすると、オーバーレイとモーダルがまとめて非表示になります。
お問い合わせ画面の確認案内、会員サイトのお知らせ、ECサイトのキャンペーン情報、管理画面の注意事項など、現在のページを離れずに利用者へ情報を表示したい場面で活用できます。背景を暗くしてモーダルへ視線を集めるため、通常のページ内メッセージよりも内容を分かりやすく伝えられます。
モーダルのタイトル、説明文、表示ボタン、閉じるボタンの文字は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>
<!-- モーダル表示エリア -->
<div class="close-button-modal-window_wrap">
<!-- タイトル -->
<div class="close-button-modal-window_title">
閉じるボタンで閉じられるモーダルウインドウ
</div>
<!-- 説明文 -->
<p class="close-button-modal-window_text">
ボタンをクリックするとモーダルウインドウが表示されます。
</p>
<!-- モーダルを開くボタン -->
<button
class="close-button-modal-window_open"
type="button"
data-close-button-modal-open="">
モーダルを開く
</button>
</div>
<!-- 画面全体を覆うオーバーレイ -->
<div
class="close-button-modal-window_overlay"
data-close-button-modal-overlay="">
<!-- モーダルウインドウ -->
<div
class="close-button-modal-window_modal"
role="dialog"
aria-modal="true"
aria-labelledby="close-button-modal-window-title">
<!-- モーダルタイトル -->
<div
class="close-button-modal-window_modal-title"
id="close-button-modal-window-title">
お知らせ
</div>
<!-- モーダル本文 -->
<p class="close-button-modal-window_modal-text">
閉じるボタンをクリックすると、このモーダルウインドウを閉じられます。
</p>
<!-- 閉じるボタン -->
<button
class="close-button-modal-window_close"
type="button"
data-close-button-modal-close="">
閉じる
</button>
</div>
</div>
<!-- JavaScriptファイルを読み込み -->
<script src="script.js"></script>
</body>
</html>
サンプル一式を取得する場合 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ではモーダルの横幅、背景色、文字色、余白、角丸、影、ボタンの色、背景の暗さなどを自由に変更できます。script.jsでは表示・非表示の処理をそのまま利用でき、必要に応じて他のボタンへも適用できます。
数値調整
style.css
max-width:700px;
デモ全体の最大横幅です。値を大きくすると横に広がり、小さくするとコンパクトになります。
padding:32px;
デモ全体の内側余白です。値を大きくすると余白が広がり、小さくすると詰まった表示になります。
max-width:420px;
モーダルの最大横幅です。値を大きくするとモーダルが横に広がり、小さくすると細くなります。
padding:28px;
モーダル内の余白です。値を大きくすると文字やボタンとの間隔が広がります。
border-radius:18px;
モーダルの角丸です。値を大きくすると丸みが強くなり、小さくすると四角い印象になります。
box-shadow:0 20px 40px rgba(0,0,0,.2);
モーダルの影です。数値を変更すると影の広がりや濃さを調整できます。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%とmax-widthにより画面幅に応じてモーダルが縮小されます。また、640px以下ではpadding:24px 18px;へ変更して余白を調整しているため、スマートフォン・タブレット・PCで利用できます。
コメント