×ボタンで閉じられるモーダルウインドウの作り方
×ボタンで閉じられるモーダルウインドウの作り方を紹介します。モーダルウインドウの右上へ×ボタンを配置し、クリックするとモーダルを閉じられる基本的な実装です。閉じるボタンを画面右上へ配置するデザインは、多くのWebサイトや管理画面、会員サイトなどで採用されており、利用者にも分かりやすい操作方法です。
サンプルコードでは、「モーダルを開く」ボタンをクリックするとモーダルが表示され、右上の×ボタンをクリックするとモーダルが閉じます。背景クリックやESCキーによる終了処理は実装せず、×ボタンによる閉じ方だけに絞っているため、シンプルな構成で導入できます。HTML・CSS・JavaScriptのみで実装しているので、そのままコピーして利用しやすい内容です。
お知らせ画面や確認画面、キャンペーン案内、入力フォームなど、利用者へ情報を表示したあとに×ボタンで閉じてもらいたい場面で活用できます。モーダル内のタイトルや本文はHTMLから変更でき、ボタンの位置やサイズ、色、余白などのデザインはCSSから自由に調整できます。シンプルな構成なので、自分のWebサイトに合わせたモーダルウインドウへカスタマイズするベースとしても利用しやすいサンプルです。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
「モーダルを開く」をクリックし、右上の×ボタンを押すとモーダルが閉じます。
コードをコピーして使おう！
<!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-close-button_wrap">
<!-- タイトル -->
<h1 class="modal-close-button_title">
×ボタンで閉じられるモーダルウインドウ
</h1>
<!-- 説明文 -->
<p class="modal-close-button_text">
モーダルを開き、右上の×ボタンをクリックすると閉じます。
</p>
<!-- モーダルを開くボタン -->
<button
class="modal-close-button_open"
type="button"
data-modal-open>
モーダルを開く
</button>
</div>
<!-- モーダル背景 -->
<div
class="modal-close-button_overlay"
data-modal-overlay>
<!-- モーダル本体 -->
<div
class="modal-close-button_modal"
role="dialog"
aria-modal="true"
aria-labelledby="modal-title">
<!-- ×ボタン -->
<button
class="modal-close-button_close"
type="button"
aria-label="閉じる"
data-modal-close>
×
</button>
<!-- モーダルタイトル -->
<h2
id="modal-title"
class="modal-close-button_modal-title">
モーダルタイトル
</h2>
<!-- モーダル本文 -->
<p class="modal-close-button_modal-text">
右上の×ボタンをクリックするとモーダルウインドウを閉じます。
</p>
</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;
デモ全体の内側余白です。値を大きくすると余白が広がり、小さくすると詰まった表示になります。
border-radius:18px;
デモ全体とモーダル本体の角丸です。値を大きくすると丸みが強くなり、小さくすると四角い印象になります。
max-width:420px;
モーダル本体の最大横幅です。値を大きくするとモーダルが横に広がり、小さくするとコンパクトになります。
padding:32px 28px 28px;
モーダル内部の余白です。値を変更するとタイトルや本文と枠線との間隔が変わります。
width:40px; / height:40px;
×ボタンの大きさです。値を大きくすると押しやすくなり、小さくするとコンパクトになります。
font-size:24px;
×ボタンの文字サイズです。値を大きくすると×が大きく表示され、小さくすると控えめになります。
top:12px; / right:12px;
×ボタンの配置位置です。値を変更すると右上からの位置が変わります。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssではモーダル本体にwidth:100%とmax-width:420pxを指定しているため、画面幅に応じて横幅が自動調整されます。また、@media (max-width:640px)ではデモ全体の余白を調整しているため、スマートフォン・タブレット・PCでも利用できます。
コメント