削除確認モーダルウインドウを作る方法【HTML/CSS/JavaScript・サンプルコード付き】
モーダルウインドウ
削除確認モーダルウインドウを作る方法
削除確認モーダルウインドウを作る方法を紹介します。削除ボタンを押した際に確認画面を表示し、ユーザーが内容を確認してから削除を実行できるサンプルです。誤操作によるデータ削除を防ぎたい場合に役立ちます。
サンプルはHTML・CSS・JavaScriptのみで動作し、「削除」「キャンセル」の2つのボタンを備えたシンプルな確認モーダルを実装しています。背景クリックや閉じるボタンでモーダルを閉じられるため、一般的なWebサイトや管理画面でもそのまま利用しやすい構成です。
実際に削除処理を行う場合は、JavaScriptやPHPと組み合わせて利用できます。削除ボタンからPHPへ送信したり、Ajaxで削除APIを呼び出したりすることも可能です。本記事では画面表示と確認UIのみを実装しているため、削除処理は用途に合わせて追加してください。
コードについて
本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。
免責事項
当サイトのサンプルコードを利用したことによって発生した損害について、一切の責任を負いません。
デモ
削除確認モーダル
「削除する」をクリックすると確認モーダルを表示します。
削除確認
このデータを削除します。
この操作は元に戻せません。
「削除する」をクリックすると確認モーダルが表示されます。「キャンセル」「×」ボタン、または背景をクリックすると閉じます。
コードをコピーして使おう！
<!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のみで動作し、
削除前に確認モーダルウインドウを表示します。
PHPと組み合わせる場合
・削除対象を識別できるIDをPHPへ送信してください。
・削除処理はPHP側で実装してください。
・削除前に権限確認や対象データの存在確認を行ってください。
例
delete.php?id=123
このサンプルには実際の削除処理は含まれていません。
==================================================
-->
<!-- 削除確認モーダルを開く操作エリア -->
<div class="delete-confirm-modal_wrap">
<!-- 操作エリアのタイトル -->
<div class="delete-confirm-modal_title">
削除確認モーダル
</div>
<!-- 操作エリアの説明文 -->
<p class="delete-confirm-modal_text">
「削除する」をクリックすると確認モーダルを表示します。
</p>
<!-- 削除確認モーダルを開くボタン -->
<button
class="delete-confirm-modal_open"
type="button"
data-delete-confirm-modal-open>
削除する
</button>
</div>
<!-- モーダル背景 -->
<div
class="delete-confirm-modal_overlay"
data-delete-confirm-modal-overlay>
<!-- モーダル本体 -->
<div
class="delete-confirm-modal_modal"
role="dialog"
aria-modal="true"
aria-labelledby="delete-confirm-modal-title">
<!-- モーダルを閉じるボタン -->
<button
class="delete-confirm-modal_close"
type="button"
data-delete-confirm-modal-close
aria-label="閉じる">
×
</button>
<!-- モーダルタイトル -->
<div
class="delete-confirm-modal_heading"
id="delete-confirm-modal-title">
削除確認
</div>
<!-- 削除前の確認メッセージ -->
<p class="delete-confirm-modal_message">
このデータを削除します。<br>
この操作は元に戻せません。
</p>
<!-- 操作ボタンエリア -->
<div class="delete-confirm-modal_buttons">
<!-- 削除をキャンセルするボタン -->
<button
class="delete-confirm-modal_cancel"
type="button"
data-delete-confirm-modal-cancel>
キャンセル
</button>
<!-- 削除を実行するボタン -->
<button
class="delete-confirm-modal_delete"
type="button"
data-delete-confirm-modal-delete>
削除
</button>
</div>
<!-- デモ用の削除結果メッセージ -->
<p
class="delete-confirm-modal_notice"
data-delete-confirm-modal-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と枠線を要素サイズに含める */
}
/* 削除確認モーダルを開く操作エリア */
.delete-confirm-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と枠線を横幅に含める */
}
/* 操作エリアのタイトル */
.delete-confirm-modal_title{
margin:0 0 12px; /* 下側12pxの余白 */
color:#111827; /* タイトルの文字色 */
font-size:22px; /* タイトルの文字サイズ */
font-weight:700; /* タイトルを太字にする */
line-height:1.5; /* タイトルの行間 */
}
/* 操作エリアの説明文 */
.delete-confirm-modal_text{
margin:0 0 24px; /* 下側24pxの余白 */
color:#4b5563; /* 説明文の文字色 */
font-size:16px; /* 説明文の文字サイズ */
line-height:1.8; /* 説明文の行間 */
}
/* 削除確認モーダルを開くボタン */
.delete-confirm-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; /* マウスカーソルを指型へ変更 */
}
/* モーダル背景 */
.delete-confirm-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を画面幅に含める */
}
/* モーダル表示状態 */
.delete-confirm-modal_overlay.is-active{
display:flex; /* 表示用クラスが付いた時にモーダルを表示 */
}
/* モーダル本体 */
.delete-confirm-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); /* モーダル本体の影 */
box-sizing:border-box; /* paddingを横幅に含める */
}
/* モーダルを閉じるボタン */
.delete-confirm-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; /* マウスカーソルを指型へ変更 */
}
/* モーダルタイトル */
.delete-confirm-modal_heading{
margin:0 42px 18px 0; /* 右側に閉じるボタン分、下側に18pxの余白 */
color:#111827; /* タイトルの文字色 */
font-size:28px; /* タイトルの文字サイズ */
font-weight:700; /* タイトルを太字にする */
line-height:1.5; /* タイトルの行間 */
}
/* 削除前の確認メッセージ */
.delete-confirm-modal_message{
margin:0; /* 外側余白をなくす */
color:#4b5563; /* メッセージの文字色 */
font-size:16px; /* メッセージの文字サイズ */
line-height:1.8; /* メッセージの行間 */
}
/* 操作ボタンエリア */
.delete-confirm-modal_buttons{
display:flex; /* キャンセルと削除ボタンを横並びにする */
gap:12px; /* ボタン同士の間隔 */
margin-top:28px; /* 上側28pxの余白 */
}
/* キャンセルボタンと削除ボタンの共通設定 */
.delete-confirm-modal_cancel,
.delete-confirm-modal_delete{
flex:1; /* 2つのボタンを同じ横幅にする */
padding:12px; /* ボタン内側の余白 */
border:none; /* ボタンの枠線を非表示 */
border-radius:8px; /* ボタンの角丸 */
font-size:16px; /* ボタンの文字サイズ */
font-weight:700; /* ボタン文字を太字にする */
line-height:1.5; /* ボタン文字の行間 */
cursor:pointer; /* マウスカーソルを指型へ変更 */
}
/* キャンセルボタン */
.delete-confirm-modal_cancel{
background:#e5e7eb; /* キャンセルボタンの背景色 */
color:#111827; /* キャンセルボタンの文字色 */
}
/* 削除ボタン */
.delete-confirm-modal_delete{
background:#dc2626; /* 削除ボタンの背景色 */
color:#ffffff; /* 削除ボタンの文字色 */
}
/* デモ用の削除結果メッセージ */
.delete-confirm-modal_notice{
display:none; /* 初期状態では非表示 */
margin:20px 0 0; /* 上側20pxの余白 */
padding:12px 14px; /* メッセージ内側の余白 */
border-radius:8px; /* メッセージの角丸 */
background:#fef2f2; /* メッセージの背景色 */
color:#b91c1c; /* メッセージの文字色 */
font-size:15px; /* メッセージの文字サイズ */
line-height:1.7; /* メッセージの行間 */
}
/* デモ用メッセージの表示状態 */
.delete-confirm-modal_notice.is-active{
display:block; /* 表示用クラスが付いた時にメッセージを表示 */
}
/* 画面幅640px以下 */
@media (max-width:640px){
/* スマートフォン用の操作エリア */
.delete-confirm-modal_wrap{
padding:24px 18px; /* 上下24px・左右18pxへ余白を縮小 */
}
/* スマートフォン用のモーダル本体 */
.delete-confirm-modal_modal{
padding:48px 18px 20px; /* 上48px・左右18px・下20pxの余白 */
}
/* スマートフォン用の操作ボタン */
.delete-confirm-modal_buttons{
flex-direction:column; /* ボタンを縦並びにする */
}
}
// 削除確認モーダルを開くボタンを取得
const deleteConfirmModalOpen=document.querySelector(
"[data-delete-confirm-modal-open]"
);
// 削除確認モーダルを閉じるボタンを取得
const deleteConfirmModalClose=document.querySelector(
"[data-delete-confirm-modal-close]"
);
// 削除をキャンセルするボタンを取得
const deleteConfirmModalCancel=document.querySelector(
"[data-delete-confirm-modal-cancel]"
);
// 削除を実行するボタンを取得
const deleteConfirmModalDelete=document.querySelector(
"[data-delete-confirm-modal-delete]"
);
// モーダル背景を取得
const deleteConfirmModalOverlay=document.querySelector(
"[data-delete-confirm-modal-overlay]"
);
// デモ用の削除結果メッセージを取得
const deleteConfirmModalNotice=document.querySelector(
"[data-delete-confirm-modal-notice]"
);
// モーダルを閉じる共通処理
function closeDeleteConfirmModal(){
// モーダル背景から表示用クラスを削除
deleteConfirmModalOverlay.classList.remove("is-active");
}
// 削除するボタンをクリックした時
deleteConfirmModalOpen.addEventListener("click",function(){
// デモ用メッセージを非表示
deleteConfirmModalNotice.classList.remove("is-active");
// モーダル背景へ表示用クラスを追加
deleteConfirmModalOverlay.classList.add("is-active");
});
// 閉じるボタンをクリックした時
deleteConfirmModalClose.addEventListener("click",function(){
// モーダルを閉じる
closeDeleteConfirmModal();
});
// キャンセルボタンをクリックした時
deleteConfirmModalCancel.addEventListener("click",function(){
// モーダルを閉じる
closeDeleteConfirmModal();
});
// モーダル背景をクリックした時
deleteConfirmModalOverlay.addEventListener("click",function(event){
// モーダル本体ではなく背景部分をクリックした場合だけ閉じる
if(event.target===deleteConfirmModalOverlay){
// モーダルを閉じる
closeDeleteConfirmModal();
}
});
// 削除ボタンをクリックした時
deleteConfirmModalDelete.addEventListener("click",function(){
// このサンプルでは実際の削除処理を行わないため、
// デモ用の削除結果メッセージだけを表示
deleteConfirmModalNotice.classList.add("is-active");
// PHPと組み合わせる場合は、
// 削除対象のIDをPHPへ送信して削除処理を実装する
//
// 例
// delete.php?id=123
//
// 権限確認、対象データの存在確認、
// データベースからの削除などはPHP側で実装する
});
ファイル構成と設置方法
このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLには削除確認モーダルウインドウの構造、CSSにはモーダルやボタンのデザイン、JavaScriptにはモーダルの開閉処理や削除確認のデモ動作を記述しています。ライブラリを使用せず、HTML・CSS・JavaScriptだけで動作するため、そのままコピーして利用できます。
PHPと組み合わせる場合は、削除対象のIDなどをPHPへ送信して実際の削除処理を実装できます。このサンプルにはデータ削除処理は含まれておらず、削除確認画面の表示のみを実装しています。削除処理、権限確認、データベース更新などはPHP側で実装してください。
HTML・CSS・JavaScriptの構成はそのまま利用できるため、削除ボタンのクリック後にPHPへ送信する処理を追加するだけで実際の削除機能へ発展させることができます。
sample/
├── index.html
├── style.css
└── script.js
各ファイルの役割
index.html
削除確認モーダルウインドウ、説明文、削除ボタン、キャンセルボタンなどのHTML構造を管理します。PHPと組み合わせる場合は削除対象IDを保持するhidden要素や送信先を追加できます。
style.css
モーダルウインドウ、背景、ボタン、確認メッセージ、余白、角丸、影などのデザインを管理します。PHPと組み合わせた場合でもそのまま利用できます。
script.js
モーダルを開く処理、閉じる処理、キャンセル処理、削除ボタン押下時のデモ表示を管理します。実際の削除処理は含まれていません。
設置方法・使い方
sampleフォルダへindex.html・style.css・script.jsを配置します。sample/index.htmlをブラウザで開くと動作を確認できます。「削除する」をクリックすると削除確認モーダルウインドウが表示され、「キャンセル」「×」ボタンまたは背景をクリックすると閉じます。
PHPと組み合わせる場合は、削除ボタン押下後に削除対象IDをPHPへ送信し、削除処理を実装してください。データベース更新やCSV削除などの処理はPHP側で行います。
カスタマイズできる内容
index.htmlではタイトル、説明文、確認メッセージ、ボタン名を変更できます。style.cssではモーダルサイズ、背景色、ボタン色、余白、角丸、影などを変更できます。script.jsではモーダルの開閉処理や削除確認後の処理を編集できます。
数値調整
style.cssのmax-width:420px;を変更するとモーダルの最大横幅が変わります。padding:48px 28px 28px;を変更するとモーダル内部の余白が変わります。gap:12px;を変更するとボタン同士の間隔が変わります。width:36px;とheight:36px;を変更すると閉じるボタンの大きさが変わります。
レスポンシブ対応
style.cssではwidth:100%、max-width、padding、@media(max-width:640px)を使用してレスポンシブ対応しています。スマートフォンではモーダルやボタン配置が自動調整され、タブレット・PCでも中央に見やすく表示されます。
削除確認モーダルウインドウを作る方法【HTML/CSS/JavaScript・サンプルコード付き】
コメント