×ボタンで閉じられるモーダルウインドウの作り方
×ボタンで閉じられるモーダルウインドウの作り方を紹介します。モーダルウインドウの右上へ×ボタンを配置し、クリックするとモーダルを閉じられる基本的な実装です。閉じるボタンを画面右上へ配置するデザインは、多くの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・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の「top:12px;」「right:12px;」を変更すると×ボタンの表示位置を調整できます。
・style.cssの「width:40px;」「height:40px;」を変更すると×ボタンの大きさを変更できます。
・script.jsでは、モーダルを開く条件や閉じる処理を変更できます。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssで「width:100%;」「max-width:420px;」「padding:20px;」を設定しているため、画面サイズに応じてモーダルの幅や余白が自動調整されます。また、640px以下では余白を調整し、スマートフォン・タブレット・PCでもレイアウトが崩れにくい構成になっています。
コメント