Bootstrap confirm delete modal dialog jquery plugin

You can install from npm.

$ yarn add bootstrap-confirm-delete
$ npm install --save bootstrap-confirm-delete

This plugin depends on the following:

• jquery >= 1.9.1
• bootstrap >= 3.3.5

NOTE: This plugin has not been tested with versions prior to these.

This plugin will intercept the delete event on configured page elements. In this example it will block the deletion click on any links or buttons that have the 'delete' class on them.

<script src="jquery.js"></script>
<script src="bootstrap-confirm-delete.js"></script>

<a href="server.php" class="delete" data-type="post">Delete</a>

Initialise the plugin either in <script></script> tags on the html page or in an external .js script.

$(document).ready(() => {
  $('.delete').bootstrap_confirm_delete();
});

Notice the 'data-type' attribute on the link. The plugin will use this attribute if set to show a custom delete message. For example,

Heading: 'Delete Post'

Message: 'Are you sure you want to delete this post?'

This example shows all the available options:

$(document).ready(() => {
  $('.delete').bootstrap_confirm_delete({
    debug: false,
    heading: 'My Custom Delete Heading',
    message: 'Are you sure you want to delete this item?',
    btn_ok_label: 'Yes',
    btn_cancel_label: 'Cancel',
    data_type: 'post',
    callback: (event) => {
      // grab original clicked delete button
      var button = event.data.originalObject;
      // execute delete operation
      button.closest('tr').remove();
    },
    delete_callback: () => {
      console.log('delete button clicked');
    },
    cancel_callback: () => {
      console.log('cancel button clicked');
    },
  });
});

Bootstrap Confirm Delete plugin comes with several optional settings.

Debug mode will output events and information to the console.

This is for setting a custom modal heading.

Setting a custom delete message/question.

Set the confirm label text

Set the cancel label text

Used if heading & message are not provided

Will fire if responding to a button click that has no href attribute.

Use this callback to do any deletions from a button click. Parameters:

• data (data.originalObject contains the originally clicked object)

Will fire when the delete button is clicked and a handler is provided. Parameters:

• data (data.originalObject contains the originally clicked object)

Will fire when the cancel button is clicked and a handler is provided. Parameters:

• data (data.originalObject contains the originally clicked object)

Copyright © 2015-2019 Tom Kaczocha tom@rawphp.org

Licensed under the MIT license.

Special thanks to:

• mpecan
• iwansusanto