削除確認モーダルウインドウを作る方法【HTML/CSS/JavaScript・サンプルコード付き】

テキスト・表示ボタン・サイズ・余白・角丸・背景色・文字色・影などを設定して、HTML・CSS・JavaScriptを自動生成できます。

削除確認モーダルウインドウを作る方法

削除確認モーダルウインドウを作る方法を紹介します。このサンプルでは、HTML・CSS・JavaScriptを使用し、データを削除する前に確認画面を表示する仕組みを作成します。「削除する」ボタンをクリックすると画面中央にモーダルウインドウが表示され、削除対象の名前と確認メッセージを確認できます。誤って削除操作を実行してしまうことを防ぐため、利用者に最終確認を求める構成です。

商品管理画面や会員情報の管理ページ、登録データの一覧など、削除前に確認が必要な場面に適しています。モーダルウインドウには「いいえ」と「はい、削除する」の2つのボタンを用意しており、「いいえ」をクリックするとデータを残したまま確認画面を閉じます。一方、「はい、削除する」をクリックすると、JavaScriptによって対象のHTML要素が削除され、削除完了メッセージが表示されます。確認画面には注意書きも表示し、実行する操作の内容を分かりやすく伝えます。

削除処理にはJavaScriptのremove()メソッドを使用し、指定したHTML要素をページ上から取り除きます。削除対象の名前や確認メッセージ、ボタンの文字などはHTMLから変更でき、CSSではモーダルの横幅や余白、背景色、角丸、警告メッセージ、ボタンのデザインなどを調整できます。なお、この仕組みで削除されるのは画面上のHTML要素であり、サーバー上のファイルやデータベースには影響しません。ページを再読み込みすると元の表示に戻ります。スマートフォン・タブレット・PCでも利用しやすいレスポンシブ対応の構成です。

コードについて 本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。

免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。

デモ

削除確認モーダル

「削除する」をクリックすると確認画面が表示されます。削除するかどうかを選択してください。

「削除する」をクリックすると確認モーダルが表示されます。「いいえ」を選ぶとデータは残り、「はい、削除する」を選ぶと画面上のデータが削除されます。実際のファイルやデータベースは削除されません。ページを再読み込みすると元に戻ります。

コードをコピーして使おう！

<!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="delete-confirm-modal_item" id="delete-confirm-modal-item">

    <!-- 削除対象の情報 -->
    <div>

      <!-- 削除対象の名前。用途に合わせて変更できます -->
      <p class="delete-confirm-modal_item-name">
        サンプル商品A
      </p>

      <!-- 削除対象の補足説明 -->
      <p class="delete-confirm-modal_item-text">
        登録済みの商品データ
      </p>

    </div>

    <!-- 削除確認モーダルを開くボタン -->
    <button class="delete-confirm-modal_open" id="delete-confirm-modal-open" type="button">
      削除する
    </button>

  </div>

  <!--
    削除完了メッセージ

    「はい、削除する」をクリックすると表示されます。

    削除対象の名前を変更した場合は、
    このメッセージも合わせて変更してください。
  -->
  <p class="delete-confirm-modal_success" id="delete-confirm-modal-success" role="status">
    サンプル商品Aを削除しました。
  </p>

  <!--
    削除確認モーダル

    初期状態では非表示です。
    「削除する」をクリックすると画面中央に表示されます。

    「いいえ」では削除せずに閉じます。
    「はい、削除する」では画面上のデータを削除します。
  -->
  <div class="delete-confirm-modal_modal" id="delete-confirm-modal-modal" role="dialog" aria-modal="false" aria-labelledby="delete-confirm-modal-heading" aria-hidden="true">

    <!-- モーダルタイトル -->
    <div class="delete-confirm-modal_heading" id="delete-confirm-modal-heading">
      削除確認
    </div>

    <!--
      削除確認メッセージ

      「サンプル商品A」の部分は、
      削除対象に合わせて変更してください。
    -->
    <p class="delete-confirm-modal_message">
      <span class="delete-confirm-modal_target">サンプル商品A</span>を削除しますか？
    </p>

    <!-- 削除前の注意書き -->
    <p class="delete-confirm-modal_warning">
      この操作を実行すると、表示中のデータが削除されます。
    </p>

    <!-- 確認ボタン -->
    <div class="delete-confirm-modal_buttons">

      <!-- 削除をキャンセルするボタン -->
      <button class="delete-confirm-modal_cancel" id="delete-confirm-modal-cancel" type="button">
        いいえ
      </button>

      <!-- 削除を確定するボタン -->
      <button class="delete-confirm-modal_delete" id="delete-confirm-modal-delete" type="button">
        はい、削除する
      </button>

    </div>

  </div>

  <!-- JavaScriptファイル -->
  <script src="script.js"></script>

</body>

</html>

/* =========================================
   削除対象のデータ
========================================= */

/* 削除対象の表示エリア */
.delete-confirm-modal_item{
  display:flex; /* データ情報と削除ボタンを横並びにする */
  justify-content:space-between; /* 情報とボタンを左右に配置 */
  align-items:center; /* 縦方向の中央に揃える */
  gap:16px; /* 情報とボタンの間隔。値を大きくすると間隔が広がる */
  max-width:460px; /* 最大横幅。値を大きくすると横に広がる */
  margin:40px auto; /* 上下40pxの余白。autoで左右中央に配置 */
  padding:18px 20px; /* 上下18px・左右20pxの内側余白 */
  border:1px solid #e5e7eb; /* 枠線の太さ・種類・色 */
  border-radius:12px; /* 角丸。値を大きくすると丸みが強くなる */
  background:#ffffff; /* 背景色 */
  text-align:left; /* データ情報を左揃えにする */
  font-family:sans-serif; /* 使用するフォント */
  box-sizing:border-box; /* paddingとborderを横幅に含める */
}

/* 削除対象の名前 */
.delete-confirm-modal_item-name{
  margin:0; /* 外側余白をなくす */
  color:#111827; /* 名前の文字色 */
  font-size:16px; /* 名前の文字サイズ */
  font-weight:700; /* 名前を太字にする */
}

/* 削除対象の補足説明 */
.delete-confirm-modal_item-text{
  margin:6px 0 0; /* 上側6pxの余白。名前との間隔 */
  color:#64748b; /* 補足説明の文字色 */
  font-size:13px; /* 補足説明の文字サイズ */
}

/* 削除確認モーダルを開くボタン */
.delete-confirm-modal_open{
  flex-shrink:0; /* ボタンが縮まないようにする */
  padding:12px 18px; /* 上下12px・左右18pxの内側余白 */
  border:none; /* 枠線を非表示 */
  border-radius:8px; /* ボタンの角丸 */
  background:#dc2626; /* ボタンの背景色 */
  color:#ffffff; /* ボタンの文字色 */
  font-size:14px; /* ボタンの文字サイズ */
  font-weight:700; /* ボタンを太字にする */
  cursor:pointer; /* マウスカーソルをポインターにする */
}


/* =========================================
   削除完了メッセージ
========================================= */

/* 削除完了メッセージ */
.delete-confirm-modal_success{
  display:none; /* 初期状態では非表示 */
  max-width:460px; /* 最大横幅。削除対象の表示エリアと同じ値 */
  margin:40px auto; /* 上下40pxの余白。左右中央に配置 */
  padding:20px; /* メッセージの内側余白 */
  border:1px solid #bbf7d0; /* 緑色の枠線 */
  border-radius:12px; /* メッセージの角丸 */
  background:#f0fdf4; /* メッセージの背景色 */
  color:#166534; /* メッセージの文字色 */
  font-size:15px; /* メッセージの文字サイズ */
  font-weight:700; /* メッセージを太字にする */
  text-align:center; /* 文字を中央揃えにする */
  font-family:sans-serif; /* 使用するフォント */
  box-sizing:border-box; /* paddingとborderを横幅に含める */
}

/* 削除完了メッセージの表示状態 */
.delete-confirm-modal_success.is-active{
  display:block; /* 削除後にメッセージを表示する */
}


/* =========================================
   削除確認モーダル
========================================= */

/* モーダル本体 */
.delete-confirm-modal_modal{
  display:none; /* 初期状態では非表示 */
  position:fixed; /* ブラウザ画面を基準に固定 */
  top:50%; /* 画面の縦方向中央を基準にする */
  left:50%; /* 画面の横方向中央を基準にする */
  z-index:9999; /* 重なり順。大きくすると前面に表示されやすくなる */
  width:calc(100% - 40px); /* 画面幅から40pxを引いて左右の余白を確保 */
  max-width:420px; /* 最大横幅。大きくするとモーダルが横に広がる */
  max-height:calc(100vh - 40px); /* 画面の高さから40pxを引いた範囲に収める */
  overflow-y:auto; /* 内容が収まらない場合は縦スクロール */
  padding:28px; /* 内側余白。大きくすると内容との間隔が広がる */
  border-radius:18px; /* モーダルの角丸 */
  background:#ffffff; /* モーダルの背景色 */
  box-shadow:0 20px 40px rgba(0,0,0,.2); /* 下方向20px・ぼかし40pxの影。最後の値は影の濃さ */
  font-family:sans-serif; /* モーダル内のフォント */
  box-sizing:border-box; /* paddingとborderを横幅に含める */
  transform:translate(-50%,-50%); /* モーダル自身の半分だけ戻して中央配置 */
}

/* モーダル表示状態 */
.delete-confirm-modal_modal.is-active{
  display:block; /* モーダルを表示する */
}

/* モーダルタイトル */
.delete-confirm-modal_heading{
  margin:0 0 18px; /* 下側18pxの余白。確認文との間隔 */
  color:#111827; /* タイトルの文字色 */
  font-size:24px; /* タイトルの文字サイズ */
  font-weight:700; /* タイトルを太字にする */
  text-align:center; /* タイトルを中央揃えにする */
}

/* 削除確認メッセージ */
.delete-confirm-modal_message{
  margin:0; /* 外側余白をなくす */
  color:#4b5563; /* メッセージの文字色 */
  font-size:15px; /* メッセージの文字サイズ */
  line-height:1.8; /* 行間。大きくすると間隔が広がる */
  text-align:center; /* メッセージを中央揃えにする */
}

/* 削除対象の名前 */
.delete-confirm-modal_target{
  color:#111827; /* 削除対象名の文字色 */
  font-weight:700; /* 削除対象名を太字にする */
}

/* 削除前の注意書き */
.delete-confirm-modal_warning{
  margin:18px 0 0; /* 上側18pxの余白。確認文との間隔 */
  padding:12px 14px; /* 上下12px・左右14pxの内側余白 */
  border:1px solid #fecaca; /* 警告メッセージの枠線 */
  border-radius:8px; /* 警告メッセージの角丸 */
  background:#fef2f2; /* 警告メッセージの背景色 */
  color:#b91c1c; /* 警告メッセージの文字色 */
  font-size:14px; /* 警告メッセージの文字サイズ */
  line-height:1.7; /* 行間。大きくすると間隔が広がる */
  text-align:center; /* 注意書きを中央揃えにする */
}


/* =========================================
   確認ボタン
========================================= */

/* ボタンの配置 */
.delete-confirm-modal_buttons{
  display:flex; /* いいえ・削除ボタンを横並びにする */
  gap:12px; /* ボタン同士の間隔 */
  margin-top:28px; /* 上側28pxの余白。注意書きとの間隔 */
}

/* いいえ・削除ボタン共通 */
.delete-confirm-modal_cancel,
.delete-confirm-modal_delete{
  flex:1; /* 2つのボタンを均等な横幅にする */
  min-width:0; /* 狭い画面でも縮小できるようにする */
  padding:13px 12px; /* 上下13px・左右12pxの内側余白 */
  border:none; /* 枠線を非表示 */
  border-radius:8px; /* ボタンの角丸 */
  font-size:15px; /* ボタンの文字サイズ */
  font-weight:700; /* ボタンを太字にする */
  cursor:pointer; /* マウスカーソルをポインターにする */
}

/* いいえボタン */
.delete-confirm-modal_cancel{
  background:#111827; /* ボタンの背景色 */
  color:#ffffff; /* ボタンの文字色 */
}

/* はい、削除するボタン */
.delete-confirm-modal_delete{
  background:#dc2626; /* ボタンの背景色 */
  color:#ffffff; /* ボタンの文字色 */
}


/* =========================================
   レスポンシブ対応
========================================= */

/* 画面幅640px以下 */
@media (max-width:640px){

  /* 削除対象のデータ */
  .delete-confirm-modal_item{
    padding:16px 14px; /* 上下16px・左右14pxに変更 */
  }

  /* モーダル本体 */
  .delete-confirm-modal_modal{
    padding:24px 18px; /* 上下24px・左右18pxに変更 */
  }

  /* 確認ボタン */
  .delete-confirm-modal_buttons{
    gap:10px; /* ボタン同士の間隔を10pxに変更 */
  }

}

/* 画面幅380px以下 */
@media (max-width:380px){

  /* 削除対象のデータ */
  .delete-confirm-modal_item{
    flex-direction:column; /* 情報と削除ボタンを縦並びにする */
    align-items:stretch; /* 横幅いっぱいに広げる */
    text-align:center; /* データ情報を中央揃えにする */
  }

  /* 削除するボタン */
  .delete-confirm-modal_open{
    width:100%; /* ボタンを横幅いっぱいにする */
  }

  /* いいえ・削除ボタン */
  .delete-confirm-modal_cancel,
  .delete-confirm-modal_delete{
    padding:12px 8px; /* 上下12px・左右8pxに変更 */
    font-size:13px; /* 文字サイズを小さくする */
  }

}

// =========================================
// 要素の取得
// =========================================

// 削除対象のHTML要素を取得
// 別の要素を削除する場合は、HTMLのid属性と合わせて変更します。
const deleteConfirmModalItem =
  document.getElementById("delete-confirm-modal-item");

// 削除確認モーダルを開くボタン
const deleteConfirmModalOpen =
  document.getElementById("delete-confirm-modal-open");

// モーダル本体
const deleteConfirmModalModal =
  document.getElementById("delete-confirm-modal-modal");

// いいえボタン
const deleteConfirmModalCancel =
  document.getElementById("delete-confirm-modal-cancel");

// はい、削除するボタン
const deleteConfirmModalDelete =
  document.getElementById("delete-confirm-modal-delete");

// 削除完了メッセージ
const deleteConfirmModalSuccess =
  document.getElementById("delete-confirm-modal-success");


// =========================================
// モーダルを開く
// =========================================

// 「削除する」をクリックしたとき
deleteConfirmModalOpen.addEventListener("click", () => {

  // モーダルを表示
  deleteConfirmModalModal.classList.add("is-active");

  // 非表示状態を解除
  deleteConfirmModalModal.setAttribute("aria-hidden", "false");

});


// =========================================
// 削除をキャンセル
// =========================================

// 「いいえ」をクリックしたとき
deleteConfirmModalCancel.addEventListener("click", () => {

  // モーダルを閉じる
  deleteConfirmModalModal.classList.remove("is-active");

  // 非表示状態に設定
  deleteConfirmModalModal.setAttribute("aria-hidden", "true");

});


// =========================================
// 削除を確定
// =========================================

// 「はい、削除する」をクリックしたとき
deleteConfirmModalDelete.addEventListener("click", () => {

  // 指定したHTML要素を画面上から削除
  deleteConfirmModalItem.remove();

  // 削除完了メッセージを表示
  deleteConfirmModalSuccess.classList.add("is-active");

  // モーダルを閉じる
  deleteConfirmModalModal.classList.remove("is-active");

  // 非表示状態に設定
  deleteConfirmModalModal.setAttribute("aria-hidden", "true");

});

// このサンプルではHTML要素だけを削除します。
// サーバー上のファイルやデータベースは削除されません。
// ページを再読み込みすると削除前の状態に戻ります。

コードをコピーする場合 使用するコードのタブを選び、「このタブをコピー」をクリックすると、現在表示中のコードをコピーできます。
サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。

Q ダウンロードしたけど、これをネット上で動かすにはどうするの？

Googleアカウントがあれば、InfinityFreeで無料サーバーを作成して、ダウンロードしたサンプルをネット上で動かせます。

InfinityFreeを初めて利用する場合は①から、すでにサーバーを作成している場合は②へ進んでください。

ファイル構成と設置方法

このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLでは削除対象のデータと削除確認モーダルウインドウを作成し、CSSでは削除対象のカードやモーダルのデザインを設定します。JavaScriptではモーダルの開閉とHTML要素の削除を制御し、「はい、削除する」を選択した場合に画面上のデータを取り除いて完了メッセージを表示します。

sample/
├── index.html
├── style.css
└── script.js

各ファイルの役割
index.htmlは削除対象のデータと確認モーダルを構成するファイルです。「サンプル商品A」という削除対象のカードを用意し、「削除する」ボタンから確認画面を表示できます。モーダル内には削除対象名、確認メッセージ、注意書き、「いいえ」「はい、削除する」の2つのボタンを配置しています。

style.cssは削除対象のカードと確認モーダルのデザインを設定するファイルです。カードの横幅、余白、背景色、角丸、削除ボタンの色、モーダルの影、警告メッセージ、削除完了メッセージなどを変更できます。

script.jsはモーダルウインドウの開閉と削除処理を制御するファイルです。「削除する」をクリックするとモーダルを表示し、「いいえ」をクリックすると削除せずに閉じます。「はい、削除する」をクリックすると、JavaScriptのremove()メソッドで指定したHTML要素を削除し、完了メッセージを表示します。

設置方法・使い方
sampleフォルダへindex.html・style.css・script.jsを配置してください。3ファイルを同じ階層に保存すると、index.htmlからCSSとJavaScriptが読み込まれます。

sample/index.htmlをブラウザで開くと、「サンプル商品A」という削除対象のカードと「削除する」ボタンが表示されます。ボタンをクリックすると、画面中央に削除確認モーダルウインドウが表示されます。

「いいえ」をクリックすると、削除を実行せずにモーダルが閉じます。「はい、削除する」をクリックすると、対象のカードが画面上から削除され、「サンプル商品Aを削除しました。」という完了メッセージが表示されます。

このサンプルで削除されるのはブラウザ上のHTML要素だけです。サーバー上のファイルやデータベースは削除されず、ページを再読み込みすると元の状態に戻ります。

カスタマイズできる内容
index.htmlでは、削除対象の名前、補足説明、確認メッセージ、注意書き、ボタンの文字、削除完了メッセージを変更できます。例えば「サンプル商品A」を「サンプル記事A」に変更する場合は、削除対象の名前・確認メッセージ・完了メッセージをそれぞれ書き換えてください。

削除対象にはid="delete-confirm-modal-item"を設定しています。script.jsでは、このidを指定してHTML要素を取得しています。別のHTML要素を削除したい場合は、対象のid属性とJavaScriptの取得先を一致させてください。なお、このサンプルは1件のHTML要素を削除する構成です。

style.cssでは、削除対象のカードの横幅、背景色、余白、枠線、角丸、ボタンの色、モーダルの表示位置、影、警告メッセージ、完了メッセージなどを調整できます。

数値調整
style.css

max-width:460px;
削除対象のカードと完了メッセージの最大横幅です。値を大きくすると横に広がり、小さくするとコンパクトになります。

margin:40px auto;
削除対象のカードと完了メッセージの上下余白です。40pxを大きくすると上下の間隔が広がり、小さくすると狭くなります。

padding:18px 20px;
削除対象のカードの内側余白です。上下18px・左右20pxを指定しています。値を大きくするとカード内の余白が広がります。

gap:16px;
削除対象の情報と「削除する」ボタンの間隔です。値を大きくすると間隔が広がります。

border-radius:12px;
削除対象のカードと完了メッセージの角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。

font-size:16px;
削除対象名の文字サイズです。値を大きくすると文字が大きくなります。

padding:12px 18px;
「削除する」ボタンの内側余白です。上下12px・左右18pxを指定しています。値を大きくするとボタンが大きくなります。

background:#dc2626;
「削除する」と「はい、削除する」ボタンの背景色です。色コードを変更するとボタンの色が変わります。

top:50%;
モーダルの縦方向の表示位置です。50%を基準に画面中央へ配置します。値を小さくすると上方向、大きくすると下方向へ移動します。

left:50%;
モーダルの横方向の表示位置です。50%を基準に画面中央へ配置します。値を小さくすると左方向、大きくすると右方向へ移動します。

width:calc(100% - 40px);
モーダルの横幅です。画面幅から40pxを引いて左右に余白を確保します。40pxを大きくすると画面端との間隔が広がります。

max-width:420px;
モーダルの最大横幅です。値を大きくすると横に広がり、小さくするとコンパクトになります。

max-height:calc(100vh - 40px);
モーダルの最大高さです。画面の高さから40pxを引いた範囲に収め、内容が多い場合はモーダル内を縦スクロールできるようにしています。

padding:28px;
モーダルの内側余白です。値を大きくすると内容と外枠の間隔が広がります。

border-radius:18px;
モーダル本体の角丸です。値を大きくすると丸みが強くなります。

box-shadow:0 20px 40px rgba(0,0,0,.2);
モーダルの影です。20pxは影の上下位置、40pxはぼかし範囲、.2は影の濃さを表します。

font-size:24px;
モーダルタイトルの文字サイズです。値を大きくすると「削除確認」の文字が大きくなります。

margin:18px 0 0;
注意書きの上側余白です。18pxを大きくすると確認メッセージとの間隔が広がります。

padding:12px 14px;
注意書きの内側余白です。上下12px・左右14pxを指定しています。

gap:12px;
「いいえ」と「はい、削除する」ボタンの間隔です。値を大きくするとボタン同士の間隔が広がります。

margin-top:28px;
確認ボタンの上側余白です。値を大きくすると注意書きとボタンの間隔が広がります。

padding:13px 12px;
確認ボタンの内側余白です。上下13px・左右12pxを指定しています。値を大きくするとボタンが大きくなります。

レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssでは、モーダルにwidth:calc(100% - 40px);とmax-width:420px;を設定しているため、画面幅が狭い場合は自動的に縮小します。また、max-height:calc(100vh - 40px);とoverflow-y:auto;によって、画面の高さに内容が収まらない場合はモーダル内を縦スクロールできます。

画面幅640px以下では、削除対象のカードをpadding:16px 14px;、モーダル本体をpadding:24px 18px;に変更し、確認ボタンの間隔を10pxへ縮小します。

画面幅380px以下では、削除対象の情報と「削除する」ボタンを縦並びに変更します。削除ボタンは横幅いっぱいに表示し、「いいえ」「はい、削除する」ボタンの文字サイズも13pxに調整するため、スマートフォン・タブレット・PCでも利用しやすい構成です。