jQueryとTwitter Bootstrapで削除確認モーダルダイアログを作成する方法

2024-04-15

jQueryとTwitter Bootstrapを使ってモーダルダイアログで削除確認を行う

このチュートリアルでは、jQueryとTwitter Bootstrapを使ってモーダルダイアログで削除確認を行う方法を解説します。

必要なもの

  • jQuery
  • Twitter Bootstrap

手順

  1. HTML
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>削除確認</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
  <div class="container">
    <h1>削除確認</h1>
    
    <button type="button" class="btn btn-danger" id="deleteButton">削除</button>
    
    <div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="deleteModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="deleteModalLabel">削除確認</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            本当に削除しますか？
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">キャンセル</button>
            <button type="button" class="btn btn-danger" id="confirmButton">削除</button>
          </div>
        </div>
      </div>
    </div>
  </div>
  
  <script>
    $(document).ready(function() {
      $('#deleteButton').click(function() {
        $('#deleteModal').modal('show');
      });
      
      $('#confirmButton').click(function() {
        // 削除処理を実行
        alert('削除しました！');
        $('#deleteModal').modal('hide');
      });
    });
  </script>
</body>
</html>
  1. CSS
/* カスタマイズ用CSS */
  1. JavaScript
$(document).ready(function() {
  $('#deleteButton').click(function() {
    $('#deleteModal').modal('show');
  });
  
  $('#confirmButton').click(function() {
    // 削除処理を実行
    alert('削除しました！');
    $('#deleteModal').modal('hide');
  });
});

説明

    • deleteButton ボタン: 削除ボタンをクリックするとモーダルダイアログが表示されます。
    • $('#deleteButton').click(function() {...});

カスタマイズ

  • 削除確認メッセージやボタンのラベルは自由にカスタマイズできます。
  • 削除処理は、実際に削除を行うAPIや関数に置き換えてください。
  • モーダルダイ


jQueryとTwitter Bootstrapを使ってモーダルダイアログで削除確認を行うサンプルコード

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>削除確認</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
  <div class="container">
    <h1>削除確認</h1>
    
    <button type="button" class="btn btn-danger" id="deleteButton" data-id="1">削除</button>
    
    <div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="deleteModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="deleteModalLabel">削除確認</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            <p>ID: <span id="deleteId"></span> のデータを削除しますか？</p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">キャンセル</button>
            <button type="button" class="btn btn-danger" id="confirmButton">削除</button>
          </div>
        </div>
      </div>
    </div>
  </div>
  
  <script>
    $(document).ready(function() {
      $('#deleteButton').click(function() {
        const id = $(this).data('id');
        $('#deleteId').text(id);
        $('#deleteModal').modal('show');
      });
      
      $('#confirmButton').click(function() {
        const id = $('#deleteId').text();
        
        // 削除処理を実行
        alert(`ID: ${id} のデータを削除しました！`);
        $('#deleteModal').modal('hide');
      });
    });
  </script>
</body>
</html>

このサンプルコードでは、以下の機能が追加されています。

  • データIDの表示: モーダルダイアログに削除対象のデータIDを表示します。
  • 削除処理: confirmButton ボタンがクリックされたら、削除対象のデータIDをコンソールに出力します。
  • モーダルダイアログに表示する情報やボタンを追加・削除することができます。

補足

  • このコードはあくまで一例です。ご自身の用途に合わせてカスタマイズしてください。
  • jQueryとTwitter Bootstrapの最新バージョンを使用していることを確認してください。


jQueryとTwitter Bootstrap以外でモーダルダイアログで削除確認を行う方法

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>削除確認</title>
  <style>
    /* CSS */
  </style>
</head>
<body>
  <div class="container">
    <h1>削除確認</h1>
    
    <button type="button" class="btn btn-danger" id="deleteButton">削除</button>
    
    <div id="deleteModal" class="modal">
      <div class="modal-content">
        <span class="close">&times;</span>
        <h2>削除確認</h2>
        <p>本当に削除しますか？</p>
        <button type="button" class="btn btn-danger" id="confirmButton">削除</button>
        <button type="button" class="btn btn-secondary" id="cancelButton">キャンセル</button>
      </div>
    </div>
  </div>
  
  <script>
    const deleteModal = document.getElementById('deleteModal');
    const deleteButton = document.getElementById('deleteButton');
    const closeButton = document.querySelector('.close');
    const confirmButton = document.getElementById('confirmButton');
    const cancelButton = document.getElementById('cancelButton');

    deleteButton.addEventListener('click', () => {
      deleteModal.style.display = 'block';
    });

    closeButton.addEventListener('click', () => {
      deleteModal.style.display = 'none';
    });

    cancelButton.addEventListener('click', () => {
      deleteModal.style.display = 'none';
    });

    confirmButton.addEventListener('click', () => {
      // 削除処理を実行
      alert('削除しました！');
      deleteModal.style.display = 'none';
    });
  </script>
</body>
</html>

Vue.js

<template>
  <div class="container">
    <h1>削除確認</h1>
    
    <button type="button" class="btn btn-danger" @click="openModal">削除</button>
    
    <div class="modal" v-if="showModal">
      <div class="modal-content">
        <span class="close" @click="closeModal">&times;</span>
        <h2>削除確認</h2>
        <p>本当に削除しますか？</p>
        <button type="button" class="btn btn-danger" @click="deleteData">削除</button>
        <button type="button" class="btn btn-secondary" @click="closeModal">キャンセル</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showModal: false,
    };
  },
  methods: {
    openModal() {
      this.showModal = true;
    },
    closeModal() {
      this.showModal = false;
    },
    deleteData() {
      // 削除処理を実行
      alert('削除しました！');
      this.showModal = false;
    },
  },
};
</script>

<style scoped>
/* CSS */
</style>

React.js

import React, { useState } from 'react';

const App = () => {
  const [showModal, setShowModal] = useState(false);

  const handleOpenModal = () => {
    setShowModal(true);
  };

  const handleCloseModal = () => {
    setShowModal(false);
  };

  const handleDeleteData = () => {
    // 削除処理を実行
    alert('削除しました！');
    setShowModal(false);
  };

  return (
    <div className="container">
      <h1>削除確認</h1>
      
      <button type="button" class="btn btn-danger" onClick={handleOpenModal}>削除</button>
      
      {showModal && (
        <div className="modal">
          <div className="modal-content">
            <span className="close" onClick={handleCloseModal}>&times;</span>
            <h2>削除確認</h2>
            <p>本当に削除しますか？</p>
            <button type="button" class="btn btn-

jquery twitter-bootstrap

SafariでもChromeでも安心！JavaScriptで画像の実際の幅と高さを取得する方法

この問題を解決するために、以下の3つの方法を紹介します:onloadイベントを使用する:この方法では、画像がロードされた後にonloadイベントが発生し、その中でwidthとheightプロパティにアクセスすることで、実際の幅と高さを取得できます。...

 
javascript jquery safari SafariでもChromeでも安心！JavaScriptで画像の実際の幅と高さを取得する方法

MouseEvent.composedPath()でイベント発生元の親要素を取得

JavaScript、jQuery、イベントの知識を用いて、子要素によって発生するマウスアウトイベントを無効にする方法について解説します。目次マウスアウトイベントとは子要素によるマウスアウトイベントの問題解決策 3.1 JavaScriptによるイベントリスナーの削除 3.2 jQueryによるイベントの無効化...

 
javascript jquery events MouseEvent.composedPath()でイベント発生元の親要素を取得

iframe、WebSocket、SockJS... 状況に合わせたクロスドメイン通信

jQuery AJAXは、Webページを更新せずにサーバーと通信を行うための便利な機能です。しかし、異なるドメイン間で通信を行う場合、ブラウザのセキュリティ制限によってエラーが発生します。これが「クロスドメイン問題」です。クロスドメイン問題とは...

 
javascript jquery ajax iframe、WebSocket、SockJS... 状況に合わせたクロスドメイン通信

【超便利】JavaScriptでURLのハッシュフラグメントを取得して、動的にコンテンツを切り替え

ハッシュフラグメントは、ページ内の特定の場所へ移動したり、データを渡したりするために使用されます。JavaScript でハッシュフラグメントを取得するには、以下の方法があります。最も簡単な方法は、location. hash プロパティを使用することです。このプロパティには、現在の URL のハッシュフラグメントが格納されています。...

 
javascript jquery url 【超便利】JavaScriptでURLのハッシュフラグメントを取得して、動的にコンテンツを切り替え

【画像付き解説】JavaScript、jQuery、jQueryプラグインで「src」と「dist」フォルダを正しく使う方法

src（ソース）フォルダ:開発者がコードを書く場所未加工のソースコードを含むデバッグや編集を行う目的で使用*.js, *.css, *.html などのファイル形式dist（配布）フォルダ:ユーザーに配布する準備が整ったファイルを含むソースコードを圧縮・結合したものや、ビルドツールで生成されたファイルが含まれる...

 
javascript jquery plugins 【画像付き解説】JavaScript、jQuery、jQueryプラグインで「src」と「dist」フォルダを正しく使う方法

SQL SQL SQL SQL Amazon で見る