保存確認モーダルウインドウを作る方法
保存確認モーダルウインドウをHTML・CSS・JavaScriptで作る方法を紹介します。「変更を保存」をクリックすると確認画面が表示され、「キャンセル」と「保存する」のどちらかを選択できるサンプルです。設定内容や入力データを保存する前に、ユーザーへ最終確認を求めたい場合に利用できます。
このサンプルでは、保存確認モーダルの表示と非表示、キャンセルボタン、閉じるボタン、背景クリックによる閉じる処理、保存ボタンを押した後の完了メッセージ表示を実装しています。管理画面、会員情報編集画面、記事編集画面、設定変更画面など、誤操作を防ぎたい場面で活用できます。
現在のコードには実際の保存処理は含まれておらず、フロントエンド側の確認画面と動作だけを実装しています。PHPと組み合わせる場合は、保存ボタンから入力内容を送信し、データベースやCSVへの保存処理をPHP側で実装できます。確認メッセージやボタン名、色、余白、モーダルサイズは用途に合わせて変更できます。
コードについて
本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。
免責事項
本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
保存確認モーダル
「変更を保存」をクリックすると保存確認モーダルを表示します。
保存確認
変更した内容を保存します。
よろしいですか？
デモのため、実際のデータは保存されません。
「変更を保存」をクリックすると確認モーダルが表示されます。「保存する」をクリックするとデモ用メッセージが表示されます。
コードをコピーして使おう！
<!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>
<!--
==================================================
このサンプルについて
==================================================
このサンプルはHTML・CSS・JavaScriptのみで動作し、
保存前に確認モーダルウインドウを表示します。
「保存する」をクリックした場合は、
実際の保存処理を行わず、
デモ用のメッセージを表示します。
実際にデータを保存する場合は、
JavaScriptやPHPと組み合わせて処理を追加してください。
==================================================
-->
<!-- 保存確認モーダルを開く操作エリア -->
<div class="save-confirm-modal-window_wrap">
<!-- 操作エリアのタイトル -->
<div class="save-confirm-modal-window_title">
保存確認モーダル
</div>
<!-- 操作エリアの説明文 -->
<p class="save-confirm-modal-window_text">
「変更を保存」をクリックすると保存確認モーダルを表示します。
</p>
<!-- 保存確認モーダルを開くボタン -->
<button
class="save-confirm-modal-window_open"
type="button"
data-save-confirm-modal-window-open>
変更を保存
</button>
</div>
<!-- モーダル背景 -->
<div
class="save-confirm-modal-window_overlay"
data-save-confirm-modal-window-overlay>
<!-- モーダル本体 -->
<div
class="save-confirm-modal-window_modal"
role="dialog"
aria-modal="true"
aria-labelledby="save-confirm-modal-window-title">
<!-- モーダルを閉じるボタン -->
<button
class="save-confirm-modal-window_close"
type="button"
data-save-confirm-modal-window-close
aria-label="閉じる">
×
</button>
<!-- モーダルタイトル -->
<div
class="save-confirm-modal-window_heading"
id="save-confirm-modal-window-title">
保存確認
</div>
<!-- 保存前の確認メッセージ -->
<p class="save-confirm-modal-window_message">
変更した内容を保存します。<br>
よろしいですか？
</p>
<!-- 操作ボタンエリア -->
<div class="save-confirm-modal-window_buttons">
<!-- 保存をキャンセルするボタン -->
<button
class="save-confirm-modal-window_cancel"
type="button"
data-save-confirm-modal-window-cancel>
キャンセル
</button>
<!-- 保存を実行するボタン -->
<button
class="save-confirm-modal-window_save"
type="button"
data-save-confirm-modal-window-save>
保存する
</button>
</div>
<!-- デモ用の保存結果メッセージ -->
<p
class="save-confirm-modal-window_notice"
data-save-confirm-modal-window-notice
role="status">
デモのため、実際のデータは保存されません。
</p>
</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と枠線を要素サイズに含める */
}
/* 保存確認モーダルを開く操作エリア */
.save-confirm-modal-window_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と枠線を横幅に含める */
}
/* 操作エリアのタイトル */
.save-confirm-modal-window_title{
margin:0 0 12px; /* 下側12pxの余白 */
color:#111827; /* タイトルの文字色 */
font-size:22px; /* タイトルの文字サイズ */
font-weight:700; /* タイトルを太字にする */
line-height:1.5; /* タイトルの行間 */
}
/* 操作エリアの説明文 */
.save-confirm-modal-window_text{
margin:0 0 24px; /* 下側24pxの余白 */
color:#4b5563; /* 説明文の文字色 */
font-size:16px; /* 説明文の文字サイズ */
line-height:1.8; /* 説明文の行間 */
}
/* 保存確認モーダルを開くボタン */
.save-confirm-modal-window_open{
padding:12px 26px; /* ボタン内側の上下・左右余白 */
border:none; /* ボタンの枠線を非表示 */
border-radius:8px; /* ボタンの角丸 */
background:#2563eb; /* ボタンの背景色 */
color:#ffffff; /* ボタンの文字色 */
font-size:16px; /* ボタンの文字サイズ */
font-weight:700; /* ボタン文字を太字にする */
line-height:1.5; /* ボタン文字の行間 */
cursor:pointer; /* マウスカーソルを指型へ変更 */
}
/* モーダル背景 */
.save-confirm-modal-window_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を画面幅に含める */
}
/* モーダル表示状態 */
.save-confirm-modal-window_overlay.is-active{
display:flex; /* 表示用クラスが付いた時にモーダルを表示 */
}
/* モーダル本体 */
.save-confirm-modal-window_modal{
position:relative; /* 閉じるボタンの絶対配置基準 */
width:100%; /* 画面幅に合わせて縮小 */
max-width:440px; /* 最大横幅。値を大きくするとモーダルが広がる */
padding:48px 28px 28px; /* 上48px・左右28px・下28pxの内側余白 */
border-radius:18px; /* モーダル本体の角丸 */
background:#ffffff; /* モーダル本体の背景色 */
box-shadow:0 20px 50px rgba(0,0,0,.25); /* モーダル本体の影 */
box-sizing:border-box; /* paddingを横幅に含める */
}
/* モーダルを閉じるボタン */
.save-confirm-modal-window_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; /* マウスカーソルを指型へ変更 */
}
/* モーダルタイトル */
.save-confirm-modal-window_heading{
margin:0 42px 18px 0; /* 右側に閉じるボタン分、下側に18pxの余白 */
color:#111827; /* タイトルの文字色 */
font-size:28px; /* タイトルの文字サイズ */
font-weight:700; /* タイトルを太字にする */
line-height:1.5; /* タイトルの行間 */
text-align:left; /* タイトルを左揃え */
}
/* 保存前の確認メッセージ */
.save-confirm-modal-window_message{
margin:0; /* 外側余白をなくす */
color:#4b5563; /* メッセージの文字色 */
font-size:16px; /* メッセージの文字サイズ */
line-height:1.8; /* メッセージの行間 */
text-align:left; /* メッセージを左揃え */
}
/* 操作ボタンエリア */
.save-confirm-modal-window_buttons{
display:flex; /* キャンセルと保存ボタンを横並びにする */
gap:12px; /* ボタン同士の間隔 */
margin-top:28px; /* 上側28pxの余白 */
}
/* キャンセルボタンと保存ボタンの共通設定 */
.save-confirm-modal-window_cancel,
.save-confirm-modal-window_save{
flex:1; /* 2つのボタンを同じ横幅にする */
padding:12px; /* ボタン内側の余白 */
border:none; /* ボタンの枠線を非表示 */
border-radius:8px; /* ボタンの角丸 */
font-size:16px; /* ボタンの文字サイズ */
font-weight:700; /* ボタン文字を太字にする */
line-height:1.5; /* ボタン文字の行間 */
cursor:pointer; /* マウスカーソルを指型へ変更 */
}
/* キャンセルボタン */
.save-confirm-modal-window_cancel{
background:#e5e7eb; /* キャンセルボタンの背景色 */
color:#111827; /* キャンセルボタンの文字色 */
}
/* 保存ボタン */
.save-confirm-modal-window_save{
background:#2563eb; /* 保存ボタンの背景色 */
color:#ffffff; /* 保存ボタンの文字色 */
}
/* デモ用の保存結果メッセージ */
.save-confirm-modal-window_notice{
display:none; /* 初期状態では非表示 */
margin:20px 0 0; /* 上側20pxの余白 */
padding:12px 14px; /* メッセージ内側の余白 */
border-radius:8px; /* メッセージの角丸 */
background:#eff6ff; /* メッセージの背景色 */
color:#1e40af; /* メッセージの文字色 */
font-size:15px; /* メッセージの文字サイズ */
line-height:1.7; /* メッセージの行間 */
text-align:left; /* メッセージを左揃え */
}
/* デモ用メッセージの表示状態 */
.save-confirm-modal-window_notice.is-active{
display:block; /* 表示用クラスが付いた時にメッセージを表示 */
}
/* 画面幅640px以下 */
@media (max-width:640px){
/* スマートフォン用の操作エリア */
.save-confirm-modal-window_wrap{
padding:24px 18px; /* 上下24px・左右18pxへ余白を縮小 */
}
/* スマートフォン用のモーダル本体 */
.save-confirm-modal-window_modal{
padding:48px 18px 20px; /* 上48px・左右18px・下20pxの内側余白 */
}
/* スマートフォン用の操作ボタン */
.save-confirm-modal-window_buttons{
flex-direction:column; /* ボタンを縦並びにする */
}
}
// 保存確認モーダルを開くボタンを取得
const saveConfirmModalWindowOpen=document.querySelector(
"[data-save-confirm-modal-window-open]"
);
// 保存確認モーダルを閉じるボタンを取得
const saveConfirmModalWindowClose=document.querySelector(
"[data-save-confirm-modal-window-close]"
);
// 保存をキャンセルするボタンを取得
const saveConfirmModalWindowCancel=document.querySelector(
"[data-save-confirm-modal-window-cancel]"
);
// 保存を実行するボタンを取得
const saveConfirmModalWindowSave=document.querySelector(
"[data-save-confirm-modal-window-save]"
);
// モーダル背景を取得
const saveConfirmModalWindowOverlay=document.querySelector(
"[data-save-confirm-modal-window-overlay]"
);
// デモ用の保存結果メッセージを取得
const saveConfirmModalWindowNotice=document.querySelector(
"[data-save-confirm-modal-window-notice]"
);
// モーダルを閉じる共通処理
function closeSaveConfirmModalWindow(){
// モーダル背景から表示用クラスを削除
saveConfirmModalWindowOverlay.classList.remove("is-active");
}
// 変更を保存ボタンをクリックした時
saveConfirmModalWindowOpen.addEventListener("click",function(){
// デモ用メッセージを非表示
saveConfirmModalWindowNotice.classList.remove("is-active");
// モーダル背景へ表示用クラスを追加
saveConfirmModalWindowOverlay.classList.add("is-active");
});
// 閉じるボタンをクリックした時
saveConfirmModalWindowClose.addEventListener("click",function(){
// モーダルを閉じる
closeSaveConfirmModalWindow();
});
// キャンセルボタンをクリックした時
saveConfirmModalWindowCancel.addEventListener("click",function(){
// モーダルを閉じる
closeSaveConfirmModalWindow();
});
// モーダル背景をクリックした時
saveConfirmModalWindowOverlay.addEventListener("click",function(event){
// モーダル本体ではなく背景部分をクリックした場合だけ閉じる
if(event.target===saveConfirmModalWindowOverlay){
// モーダルを閉じる
closeSaveConfirmModalWindow();
}
});
// 保存ボタンをクリックした時
saveConfirmModalWindowSave.addEventListener("click",function(){
// このサンプルでは実際の保存処理を行わないため、
// デモ用の保存結果メッセージだけを表示
saveConfirmModalWindowNotice.classList.add("is-active");
// PHPと組み合わせる場合は、
// 保存するデータをPHPへ送信して保存処理を実装する
//
// 例
// save.php
//
// 入力値の検証、権限確認、
// データベースやCSVへの保存処理はPHP側で実装する
});
ファイル構成と設置方法
このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLには保存確認モーダルウインドウの構造、CSSにはモーダルやボタンのデザイン、JavaScriptにはモーダルの開閉処理や保存確認のデモ動作を記述しています。ライブラリを使用せず、HTML・CSS・JavaScriptだけで動作するため、そのままコピーして利用できます。
実際にデータを保存する場合は、JavaScriptやPHPと組み合わせて保存処理を実装できます。このサンプルにはデータ保存処理は含まれておらず、保存前の確認画面のみを実装しています。データベース更新やCSV保存などは用途に合わせて追加してください。
HTML・CSS・JavaScriptの構成はそのまま利用できるため、保存ボタンのクリック後にPHPへ送信する処理やAjax通信を追加するだけで実際の保存機能へ発展させることができます。
sample/
├── index.html
├── style.css
└── script.js
各ファイルの役割
index.html
保存確認モーダルウインドウ、説明文、保存ボタン、キャンセルボタンなどのHTML構造を管理します。PHPと組み合わせる場合はフォームや入力項目、送信先などを追加できます。
style.css
モーダルウインドウ、背景、ボタン、確認メッセージ、余白、角丸、影などのデザインを管理します。PHPと組み合わせた場合でもそのまま利用できます。
script.js
モーダルを開く処理、閉じる処理、キャンセル処理、保存ボタン押下時のデモ表示を管理します。実際の保存処理は含まれていません。
設置方法・使い方
sampleフォルダへindex.html・style.css・script.jsを配置します。sample/index.htmlをブラウザで開くと動作を確認できます。「変更を保存」をクリックすると保存確認モーダルウインドウが表示され、「キャンセル」「×」ボタンまたは背景をクリックすると閉じます。
実際に保存機能を実装する場合は、保存ボタン押下後にPHPやAjaxで保存処理を追加してください。データベースやCSVへの保存、入力値の検証などは用途に合わせて実装します。
カスタマイズできる内容
index.htmlではタイトル、説明文、確認メッセージ、ボタン名を変更できます。style.cssではモーダルサイズ、背景色、ボタン色、余白、角丸、影などを変更できます。script.jsではモーダルの開閉処理や保存ボタン押下後の処理を編集できます。
数値調整
style.cssのmax-width:440px;を変更するとモーダルの最大横幅が変わります。padding:48px 28px 28px;を変更するとモーダル内部の余白が変わります。gap:12px;を変更するとボタン同士の間隔が変わります。width:36px;とheight:36px;を変更すると閉じるボタンの大きさが変わります。
レスポンシブ対応
style.cssではwidth:100%、max-width、padding、@media(max-width:640px)を使用してレスポンシブ対応しています。スマートフォンではモーダルやボタン配置が自動調整され、タブレット・PCでも中央に見やすく表示されます。
コメント