外側クリックで閉じられるモーダルウインドウの作り方
外側クリックで閉じられるモーダルウインドウの作り方を紹介します。モーダルウインドウの外側にある背景部分をクリックしたときに、モーダルを閉じられるようにする実装です。閉じるボタンを探さなくても背景をクリックするだけで閉じられるため、お知らせ画面や確認画面などで使いやすい操作方法です。
サンプルコードでは、「モーダルを開く」ボタンをクリックするとモーダルが表示され、モーダル本体の外側にある背景部分をクリックするとモーダルが閉じます。モーダル本体をクリックしても閉じないように、JavaScriptでクリックされた場所を判定しています。HTML・CSS・JavaScriptだけで実装しているため、外部ライブラリを使わずに導入できます。
ECサイトのお知らせ表示、会員サイトの案内、管理画面の確認メッセージ、フォーム送信前の注意表示など、ユーザーが簡単に閉じられるモーダルを作りたい場合に活用できます。モーダル内のタイトルや本文はHTML、見た目はCSS、外側クリックの判定処理はJavaScriptで変更できるため、自分の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-outside-click-close_wrap">
<!-- タイトル -->
<h1 class="modal-outside-click-close_title">
外側クリックで閉じられるモーダルウインドウ
</h1>
<!-- 説明文 -->
<p class="modal-outside-click-close_text">
モーダル本体の外側をクリックするとモーダルを閉じます。
</p>
<!-- モーダルを開くボタン -->
<button
class="modal-outside-click-close_open"
type="button"
data-modal-open>
モーダルを開く
</button>
</div>
<!-- モーダル背景 -->
<div
class="modal-outside-click-close_overlay"
data-modal-overlay>
<!-- モーダル本体 -->
<div
class="modal-outside-click-close_modal"
role="dialog"
aria-modal="true"
aria-labelledby="modal-title">
<!-- モーダルタイトル -->
<h2
id="modal-title"
class="modal-outside-click-close_modal-title">
モーダルタイトル
</h2>
<!-- モーダル本文 -->
<p class="modal-outside-click-close_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の「max-width:420px;」を変更するとモーダルの横幅を調整できます。
・script.jsでは、背景クリック以外にもESCキーや×ボタンなど、閉じる条件を追加できます。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssで「width:100%;」「max-width:420px;」「padding:20px;」を設定しているため、画面サイズに応じてモーダルの幅や余白が自動調整されます。また、640px以下では余白を調整し、スマートフォン・タブレット・PCでもレイアウトが崩れにくい構成になっています。
コメント