完了メッセージをモーダルウインドウで表示する方法
完了メッセージをモーダルウインドウで表示する方法を紹介します。処理を実行するボタンをクリックすると、画面中央に完了内容を知らせるモーダルウインドウが表示されるサンプルです。フォーム送信や登録処理などが正常に完了したことを、ユーザーへ分かりやすく伝えたい場合に利用できます。
このサンプルはHTML・CSS・JavaScriptのみで動作し、「処理を実行する」ボタンから完了モーダルを表示できます。モーダル内には完了を示すアイコン、見出し、メッセージ、閉じるボタンを配置しています。「閉じる」ボタン、右上の「×」ボタン、または背景部分をクリックするとモーダルを閉じられます。
お問い合わせ画面の送信完了、会員サイトの登録完了、管理画面の更新完了、ECサイトの注文受付など、処理結果を明確に案内したい場面に適しています。表示する見出しや説明文、ボタン名、背景色、アイコンの色などはコード内で変更できるため、実際の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="show-completion-message-modal_wrap">
<!-- 操作エリアのタイトル -->
<div class="show-completion-message-modal_title">
完了メッセージモーダル
</div>
<!-- 操作エリアの説明文 -->
<p class="show-completion-message-modal_text">
「処理を実行する」をクリックすると完了メッセージを表示します。
</p>
<!-- 完了メッセージモーダルを開くボタン -->
<button
class="show-completion-message-modal_open"
type="button"
data-show-completion-message-modal-open>
処理を実行する
</button>
</div>
<!-- モーダル背景 -->
<div
class="show-completion-message-modal_overlay"
data-show-completion-message-modal-overlay>
<!-- モーダル本体 -->
<div
class="show-completion-message-modal_modal"
role="dialog"
aria-modal="true"
aria-labelledby="show-completion-message-modal-title">
<!-- モーダルを閉じるボタン -->
<button
class="show-completion-message-modal_close"
type="button"
data-show-completion-message-modal-close
aria-label="閉じる">
×
</button>
<!-- 完了を示すアイコン -->
<div
class="show-completion-message-modal_icon"
aria-hidden="true">
✓
</div>
<!-- 完了メッセージのタイトル -->
<div
class="show-completion-message-modal_heading"
id="show-completion-message-modal-title">
完了しました
</div>
<!-- 完了内容を伝えるメッセージ -->
<p class="show-completion-message-modal_message">
処理が正常に完了しました。<br>
内容が正しく保存されています。
</p>
<!-- モーダルを閉じるボタン -->
<button
class="show-completion-message-modal_button"
type="button"
data-show-completion-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-completion-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-completion-message-modal_title{
margin:0 0 12px; /* 下側12pxの余白 */
color:#111827; /* タイトルの文字色 */
font-size:22px; /* タイトルの文字サイズ */
font-weight:700; /* タイトルを太字にする */
line-height:1.5; /* タイトルの行間 */
}
/* 操作エリアの説明文 */
.show-completion-message-modal_text{
margin:0 0 24px; /* 下側24pxの余白 */
color:#4b5563; /* 説明文の文字色 */
font-size:16px; /* 説明文の文字サイズ */
line-height:1.8; /* 説明文の行間 */
}
/* 完了メッセージモーダルを開くボタン */
.show-completion-message-modal_open{
padding:12px 26px; /* ボタン内側の上下・左右余白 */
border:none; /* ボタンの枠線を非表示 */
border-radius:8px; /* ボタンの角丸 */
background:#16a34a; /* ボタンの背景色 */
color:#ffffff; /* ボタンの文字色 */
font-size:16px; /* ボタンの文字サイズ */
font-weight:700; /* ボタン文字を太字にする */
line-height:1.5; /* ボタン文字の行間 */
cursor:pointer; /* マウスカーソルを指型へ変更 */
}
/* モーダル背景 */
.show-completion-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-completion-message-modal_overlay.is-active{
display:flex; /* 表示用クラスが付いた時にモーダルを表示 */
}
/* モーダル本体 */
.show-completion-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-completion-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-completion-message-modal_icon{
display:flex; /* アイコンを中央配置する */
align-items:center; /* アイコンを縦中央へ配置 */
justify-content:center; /* アイコンを横中央へ配置 */
width:72px; /* アイコン背景の横幅 */
height:72px; /* アイコン背景の高さ */
margin:0 auto 20px; /* 左右中央へ配置し下側20pxの余白 */
border-radius:50%; /* アイコン背景を円形にする */
background:#dcfce7; /* アイコン背景の色 */
color:#16a34a; /* チェックマークの色 */
font-size:38px; /* チェックマークの文字サイズ */
font-weight:700; /* チェックマークを太くする */
line-height:1; /* チェックマークの行間を詰める */
}
/* 完了メッセージのタイトル */
.show-completion-message-modal_heading{
margin:0 0 16px; /* 下側16pxの余白 */
color:#111827; /* タイトルの文字色 */
font-size:28px; /* タイトルの文字サイズ */
font-weight:700; /* タイトルを太字にする */
line-height:1.5; /* タイトルの行間 */
}
/* 完了内容を伝えるメッセージ */
.show-completion-message-modal_message{
margin:0; /* 外側余白をなくす */
color:#4b5563; /* メッセージの文字色 */
font-size:16px; /* メッセージの文字サイズ */
line-height:1.8; /* メッセージの行間 */
}
/* モーダル下部の閉じるボタン */
.show-completion-message-modal_button{
width:100%; /* モーダル内の横幅いっぱいへ広げる */
margin-top:28px; /* 上側28pxの余白 */
padding:12px; /* ボタン内側の余白 */
border:none; /* ボタンの枠線を非表示 */
border-radius:8px; /* ボタンの角丸 */
background:#16a34a; /* ボタンの背景色 */
color:#ffffff; /* ボタンの文字色 */
font-size:16px; /* ボタンの文字サイズ */
font-weight:700; /* ボタン文字を太字にする */
line-height:1.5; /* ボタン文字の行間 */
cursor:pointer; /* マウスカーソルを指型へ変更 */
}
/* 画面幅640px以下 */
@media (max-width:640px){
/* スマートフォン用の操作エリア */
.show-completion-message-modal_wrap{
padding:24px 18px; /* 上下24px・左右18pxへ余白を縮小 */
}
/* スマートフォン用のモーダル本体 */
.show-completion-message-modal_modal{
padding:48px 18px 20px; /* 上48px・左右18px・下20pxの余白 */
}
}
// 完了メッセージモーダルを開くボタンを取得
const showCompletionMessageModalOpen=document.querySelector(
"[data-show-completion-message-modal-open]"
);
// モーダル右上の閉じるボタンを取得
const showCompletionMessageModalClose=document.querySelector(
"[data-show-completion-message-modal-close]"
);
// モーダル下部の閉じるボタンを取得
const showCompletionMessageModalButton=document.querySelector(
"[data-show-completion-message-modal-button]"
);
// モーダル背景を取得
const showCompletionMessageModalOverlay=document.querySelector(
"[data-show-completion-message-modal-overlay]"
);
// モーダルを閉じる共通処理
function closeShowCompletionMessageModal(){
// モーダル背景から表示用クラスを削除
showCompletionMessageModalOverlay.classList.remove("is-active");
}
// 処理を実行するボタンをクリックした時
showCompletionMessageModalOpen.addEventListener("click",function(){
// モーダル背景へ表示用クラスを追加
showCompletionMessageModalOverlay.classList.add("is-active");
});
// モーダル右上の閉じるボタンをクリックした時
showCompletionMessageModalClose.addEventListener("click",function(){
// モーダルを閉じる
closeShowCompletionMessageModal();
});
// モーダル下部の閉じるボタンをクリックした時
showCompletionMessageModalButton.addEventListener("click",function(){
// モーダルを閉じる
closeShowCompletionMessageModal();
});
// モーダル背景をクリックした時
showCompletionMessageModalOverlay.addEventListener("click",function(event){
// モーダル本体ではなく背景部分をクリックした場合だけ閉じる
if(event.target===showCompletionMessageModalOverlay){
// モーダルを閉じる
closeShowCompletionMessageModal();
}
});
ファイル構成と設置方法
このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLには完了メッセージモーダルウインドウの構造、CSSにはモーダルやボタンのデザイン、JavaScriptにはモーダルの表示・非表示処理を記述しています。ライブラリを使用せず、HTML・CSS・JavaScriptだけで動作するため、そのままコピーして利用できます。
モーダルは「処理を実行する」ボタンをクリックすると表示され、「閉じる」ボタン、右上の「×」ボタン、または背景をクリックすると閉じます。お問い合わせ画面の送信完了、管理画面の更新完了、会員登録完了など、処理完了をユーザーへ分かりやすく伝えたい場面で利用できます。
表示するタイトルやメッセージ、ボタン名、色などは自由に変更できます。JavaScriptもシンプルな構成のため、実際の送信処理や保存処理が完了したタイミングでモーダルを表示するように組み込むことも簡単です。
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でも中央に見やすく表示されます。
コメント