エラーメッセージをモーダルウインドウで表示する方法
エラーメッセージをモーダルウインドウで表示する方法を紹介します。処理に失敗した場合や入力内容に問題がある場合に、画面中央へエラー内容を表示できるサンプルです。通常の文章として表示するよりもユーザーの目に入りやすく、問題が発生したことを明確に伝えられます。
このサンプルはHTML・CSS・JavaScriptのみで動作し、「処理を実行する」ボタンをクリックするとエラーメッセージモーダルが表示されます。モーダル内にはエラーを示すアイコン、見出し、メッセージ、閉じるボタンを配置しています。「閉じる」ボタン、右上の「×」ボタン、または背景部分をクリックするとモーダルを閉じられます。
お問い合わせ画面の送信失敗、会員サイトのログインエラー、管理画面の更新失敗、ECサイトの決済エラーなど、処理を続けられない理由を案内したい場面に利用できます。見出しや説明文、ボタン名、背景色、アイコンの色などはコード内で変更できるため、表示するエラー内容に合わせてカスタマイズできます。
コードについて
本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。
免責事項
本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
エラーメッセージモーダル
「処理を実行する」をクリックするとエラーメッセージを表示します。
!
エラーが発生しました
処理を完了できませんでした。
入力内容を確認して、もう一度お試しください。
「処理を実行する」をクリックするとエラーモーダルが表示されます。「閉じる」「×」ボタン、または背景をクリックすると閉じます。
コードをコピーして使おう！
<!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="show-error-message-modal_wrap">
<!-- 操作エリアのタイトル -->
<div class="show-error-message-modal_title">
エラーメッセージモーダル
</div>
<!-- 操作エリアの説明文 -->
<p class="show-error-message-modal_text">
「処理を実行する」をクリックするとエラーメッセージを表示します。
</p>
<!-- エラーメッセージモーダルを開くボタン -->
<button
class="show-error-message-modal_open"
type="button"
data-show-error-message-modal-open>
処理を実行する
</button>
</div>
<!-- モーダル背景 -->
<div
class="show-error-message-modal_overlay"
data-show-error-message-modal-overlay>
<!-- モーダル本体 -->
<div
class="show-error-message-modal_modal"
role="dialog"
aria-modal="true"
aria-labelledby="show-error-message-modal-title">
<!-- モーダルを閉じるボタン -->
<button
class="show-error-message-modal_close"
type="button"
data-show-error-message-modal-close
aria-label="閉じる">
×
</button>
<!-- エラーを示すアイコン -->
<div
class="show-error-message-modal_icon"
aria-hidden="true">
!
</div>
<!-- エラーメッセージのタイトル -->
<div
class="show-error-message-modal_heading"
id="show-error-message-modal-title">
エラーが発生しました
</div>
<!-- エラー内容を伝えるメッセージ -->
<p class="show-error-message-modal_message">
処理を完了できませんでした。<br>
入力内容を確認して、もう一度お試しください。
</p>
<!-- モーダルを閉じるボタン -->
<button
class="show-error-message-modal_button"
type="button"
data-show-error-message-modal-button>
閉じる
</button>
</div>
</div>
<!-- JavaScriptファイルを読み込み -->
<script src="script.js"></script>
</body>
</html>
/* ページ全体 */
body{
margin:0; /* ページ外側の余白をなくす */
padding:40px 20px; /* 上下40px・左右20pxの余白 */
background:#ffffff; /* ページ全体の背景色 */
color:#111827; /* ページ全体の基本文字色 */
font-family:sans-serif; /* ページ全体のフォント */
box-sizing:border-box; /* paddingと枠線を要素サイズに含める */
}
/* エラーメッセージモーダルを開く操作エリア */
.show-error-message-modal_wrap{
max-width:700px; /* 最大横幅。値を大きくすると操作エリアが広がる */
margin:40px auto; /* 上下40pxの余白を付けて左右中央へ配置 */
padding:32px; /* 内側余白。値を大きくすると内容周囲の余白が広がる */
border:1px solid #e5e7eb; /* 枠線の太さと色 */
border-radius:18px; /* 角丸。値を大きくすると丸みが強くなる */
background:#f8fafc; /* 操作エリアの背景色 */
text-align:center; /* 内容を中央揃え */
box-sizing:border-box; /* paddingと枠線を横幅に含める */
}
/* 操作エリアのタイトル */
.show-error-message-modal_title{
margin:0 0 12px; /* 下側12pxの余白 */
color:#111827; /* タイトルの文字色 */
font-size:22px; /* タイトルの文字サイズ */
font-weight:700; /* タイトルを太字にする */
line-height:1.5; /* タイトルの行間 */
}
/* 操作エリアの説明文 */
.show-error-message-modal_text{
margin:0 0 24px; /* 下側24pxの余白 */
color:#4b5563; /* 説明文の文字色 */
font-size:16px; /* 説明文の文字サイズ */
line-height:1.8; /* 説明文の行間 */
}
/* エラーメッセージモーダルを開くボタン */
.show-error-message-modal_open{
padding:12px 26px; /* ボタン内側の上下・左右余白 */
border:none; /* ボタンの枠線を非表示 */
border-radius:8px; /* ボタンの角丸 */
background:#dc2626; /* ボタンの背景色 */
color:#ffffff; /* ボタンの文字色 */
font-size:16px; /* ボタンの文字サイズ */
font-weight:700; /* ボタン文字を太字にする */
line-height:1.5; /* ボタン文字の行間 */
cursor:pointer; /* マウスカーソルを指型へ変更 */
}
/* モーダル背景 */
.show-error-message-modal_overlay{
display:none; /* 初期状態ではモーダルを非表示 */
position:fixed; /* モーダル背景を画面全体へ固定 */
inset:0; /* 上下左右を0にして画面全体へ広げる */
z-index:9999; /* 他の要素より前面へ表示 */
align-items:center; /* モーダル本体を縦中央へ配置 */
justify-content:center; /* モーダル本体を横中央へ配置 */
padding:20px; /* 画面端との余白 */
background:rgba(0,0,0,.6); /* 背景色。.6を大きくすると暗くなる */
box-sizing:border-box; /* paddingを画面幅に含める */
}
/* モーダル表示状態 */
.show-error-message-modal_overlay.is-active{
display:flex; /* 表示用クラスが付いた時にモーダルを表示 */
}
/* モーダル本体 */
.show-error-message-modal_modal{
position:relative; /* 閉じるボタンの絶対配置基準 */
width:100%; /* 画面幅に合わせて縮小 */
max-width:420px; /* 最大横幅。値を大きくするとモーダルが広がる */
padding:48px 28px 28px; /* 上48px・左右28px・下28pxの内側余白 */
border-radius:18px; /* モーダル本体の角丸 */
background:#ffffff; /* モーダル本体の背景色 */
box-shadow:0 20px 50px rgba(0,0,0,.25); /* モーダル本体の影 */
text-align:center; /* モーダル内の内容を中央揃え */
box-sizing:border-box; /* paddingを横幅に含める */
}
/* モーダルを閉じるボタン */
.show-error-message-modal_close{
position:absolute; /* モーダル右上へ配置 */
top:12px; /* 上端からの位置 */
right:12px; /* 右端からの位置 */
width:36px; /* ボタンの横幅 */
height:36px; /* ボタンの高さ */
padding:0; /* ボタン内側の余白をなくす */
border:none; /* ボタンの枠線を非表示 */
border-radius:50%; /* ボタンを円形にする */
background:#111827; /* ボタンの背景色 */
color:#ffffff; /* ×印の文字色 */
font-size:22px; /* ×印の文字サイズ */
line-height:1; /* ×印の行間を詰める */
cursor:pointer; /* マウスカーソルを指型へ変更 */
}
/* エラーを示すアイコン */
.show-error-message-modal_icon{
display:flex; /* アイコンを中央配置する */
align-items:center; /* アイコンを縦中央へ配置 */
justify-content:center; /* アイコンを横中央へ配置 */
width:72px; /* アイコン背景の横幅 */
height:72px; /* アイコン背景の高さ */
margin:0 auto 20px; /* 左右中央へ配置し下側20pxの余白 */
border-radius:50%; /* アイコン背景を円形にする */
background:#fee2e2; /* アイコン背景の色 */
color:#dc2626; /* 感嘆符の色 */
font-size:38px; /* 感嘆符の文字サイズ */
font-weight:700; /* 感嘆符を太くする */
line-height:1; /* 感嘆符の行間を詰める */
}
/* エラーメッセージのタイトル */
.show-error-message-modal_heading{
margin:0 0 16px; /* 下側16pxの余白 */
color:#111827; /* タイトルの文字色 */
font-size:28px; /* タイトルの文字サイズ */
font-weight:700; /* タイトルを太字にする */
line-height:1.5; /* タイトルの行間 */
}
/* エラー内容を伝えるメッセージ */
.show-error-message-modal_message{
margin:0; /* 外側余白をなくす */
color:#4b5563; /* メッセージの文字色 */
font-size:16px; /* メッセージの文字サイズ */
line-height:1.8; /* メッセージの行間 */
}
/* モーダル下部の閉じるボタン */
.show-error-message-modal_button{
width:100%; /* モーダル内の横幅いっぱいへ広げる */
margin-top:28px; /* 上側28pxの余白 */
padding:12px; /* ボタン内側の余白 */
border:none; /* ボタンの枠線を非表示 */
border-radius:8px; /* ボタンの角丸 */
background:#dc2626; /* ボタンの背景色 */
color:#ffffff; /* ボタンの文字色 */
font-size:16px; /* ボタンの文字サイズ */
font-weight:700; /* ボタン文字を太字にする */
line-height:1.5; /* ボタン文字の行間 */
cursor:pointer; /* マウスカーソルを指型へ変更 */
}
/* 画面幅640px以下 */
@media (max-width:640px){
/* スマートフォン用の操作エリア */
.show-error-message-modal_wrap{
padding:24px 18px; /* 上下24px・左右18pxへ余白を縮小 */
}
/* スマートフォン用のモーダル本体 */
.show-error-message-modal_modal{
padding:48px 18px 20px; /* 上48px・左右18px・下20pxの余白 */
}
}
// エラーメッセージモーダルを開くボタンを取得
const showErrorMessageModalOpen=document.querySelector(
"[data-show-error-message-modal-open]"
);
// モーダル右上の閉じるボタンを取得
const showErrorMessageModalClose=document.querySelector(
"[data-show-error-message-modal-close]"
);
// モーダル下部の閉じるボタンを取得
const showErrorMessageModalButton=document.querySelector(
"[data-show-error-message-modal-button]"
);
// モーダル背景を取得
const showErrorMessageModalOverlay=document.querySelector(
"[data-show-error-message-modal-overlay]"
);
// モーダルを閉じる共通処理
function closeShowErrorMessageModal(){
// モーダル背景から表示用クラスを削除
showErrorMessageModalOverlay.classList.remove("is-active");
}
// 処理を実行するボタンをクリックした時
showErrorMessageModalOpen.addEventListener("click",function(){
// モーダル背景へ表示用クラスを追加
showErrorMessageModalOverlay.classList.add("is-active");
});
// モーダル右上の閉じるボタンをクリックした時
showErrorMessageModalClose.addEventListener("click",function(){
// モーダルを閉じる
closeShowErrorMessageModal();
});
// モーダル下部の閉じるボタンをクリックした時
showErrorMessageModalButton.addEventListener("click",function(){
// モーダルを閉じる
closeShowErrorMessageModal();
});
// モーダル背景をクリックした時
showErrorMessageModalOverlay.addEventListener("click",function(event){
// モーダル本体ではなく背景部分をクリックした場合だけ閉じる
if(event.target===showErrorMessageModalOverlay){
// モーダルを閉じる
closeShowErrorMessageModal();
}
});
ファイル構成と設置方法
このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLにはエラーメッセージモーダルウインドウの構造、CSSにはモーダルやボタンのデザイン、JavaScriptにはモーダルの表示・非表示処理を記述しています。ライブラリを使用せず、HTML・CSS・JavaScriptだけで動作するため、そのままコピーして利用できます。
モーダルは「処理を実行する」ボタンをクリックすると表示され、「閉じる」ボタン、右上の「×」ボタン、または背景をクリックすると閉じます。お問い合わせ画面の送信失敗、会員サイトのログインエラー、管理画面の更新失敗、ECサイトの決済エラーなど、処理を続行できない理由を分かりやすく伝えたい場面で利用できます。
表示するタイトルやエラーメッセージ、ボタン名、色などは自由に変更できます。JavaScriptもシンプルな構成のため、実際の入力チェックやAPI通信、サーバー処理でエラーが発生したタイミングに合わせてモーダルを表示するよう簡単に組み込めます。
sample/
├── index.html
├── style.css
└── script.js
各ファイルの役割
index.html
エラーメッセージモーダルウインドウ、タイトル、説明文、ボタンなどのHTML構造を管理します。表示する文章やボタン名を変更できます。
style.css
モーダルウインドウ、背景、エラーアイコン、ボタン、余白、角丸、影などのデザインを管理します。
script.js
モーダルを開く処理、閉じる処理、背景クリック時の閉じる処理などを管理します。
設置方法・使い方
sampleフォルダへindex.html・style.css・script.jsを配置します。sample/index.htmlをブラウザで開くと動作を確認できます。「処理を実行する」をクリックするとエラーメッセージモーダルが表示され、「閉じる」「×」ボタン、または背景をクリックするとモーダルを閉じます。
カスタマイズできる内容
index.htmlではタイトル、エラーメッセージ、ボタン名を変更できます。style.cssではモーダルサイズ、背景色、アイコン色、ボタン色、余白、角丸、影などを変更できます。script.jsではモーダルを表示するタイミングや閉じる処理を編集できます。
数値調整
style.cssのmax-width:420px;を変更するとモーダルの最大横幅が変わります。padding:48px 28px 28px;を変更するとモーダル内部の余白が変わります。width:72px;とheight:72px;を変更するとエラーアイコンの大きさが変わります。font-size:38px;を変更すると感嘆符のサイズが変わります。
レスポンシブ対応
style.cssではwidth:100%、max-width、padding、@media(max-width:640px)を使用してレスポンシブ対応しています。スマートフォンではモーダルの余白が自動調整され、タブレット・PCでも中央に見やすく表示されます。
コメント