Delete Confirmation Dialog Plugin with jQuery and Bootstrap

File Size: 8.2 KB
Views Total: 36787
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Delete Confirmation Dialog Plugin with jQuery and Bootstrap

A very small jQuery plugin that utilizes Bootstrap's modal component to show a confirmation dialog before you delete something from DOM elements.

Basic usage:

1. Add jQuery JavaScript library and the Bootstrap Confirm Delete plugin to your Bootstrap web project.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="bootstrap-confirm-delete.js"></script>

2. Create a 'delete' button to remove a specified entry from DOM elements.

<a href="#" class="demo">
  <span class="glyphicon glyphicon-remove"></span>
</a>

3. Active the 'delete' button with default settings.

$('.demo').bootstrap_confirm_delete({
  // options & callback here
});

4. Customize the confirmation modal dialog.

$('.demo').bootstrap_confirm_delete({
  heading: 'Delete',
  message: 'Are you sure you want to delete this item?',
  data_type: null,
});

5. Callback function available.

$('.demo').bootstrap_confirm_delete({

  // 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)
  callback: null,

  // Will fire when the delete button is clicked and a handler is provided. 
  // Parameters:
  // data (data.originalObject contains the originally clicked object)
  delete_callback: null,

  // Will fire when the cancel button is clicked and a handler is provided. 
  // Parameters:
  // data (data.originalObject contains the originally clicked object)
  cancel_callback: null
  
});

Changelog:

2019-01-28

  • Added callback fix

2016-07-10

  • Fix variable styles

This awesome jQuery plugin is developed by rawphp. For more Advanced Usages, please check the demo page or visit the official website.