Create Custom Confirmation Popups With Bootstrap 5 - jquery-bs-confirm

jquery-bs-confirm is a lightweight jQuery plugin that leverages the Bootstrap 5's modal component to create customizable confirmation dialogs. 

Features:

• With or without a header. This means you can keep your confirm dialog minimalistic or provide more context, based on the user interaction.
• With the custom animation class feature, developers can bring their dialogs to life by adding their own unique animations.
• Callback Functions. For those looking to have specific actions or feedback post-confirmation or cancellation, the plugin offers 'onCancel', 'onConfirm', and 'onComplete' callback functions.

How to use it:

1. Download and load the minified version of the jquery-bs-confirm plugin in your Bootstrap 5 project.

<!-- Required -->
<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/cdn/bootstrap.min.js"></script>

<!-- Required -->
<script src="/dist/jquery-bs-confirm.min.js"></script>

2. Call the confirm() function to trigger a basic confirm dialog.

(function($){
  $.confirm();
}(jQuery));

3. Available options to customize the confirm dialog.

$.confirm({

  // additional CSS class(es) for the confirm dialog
  dialog: '',

  // confirm title
  title: 'Please confirm this action',

  // confirm message
  message: 'Are they sure they want to do this action?',

  // shows confirm header
  showHeader: true,

  // animation class(es)
  animationClass: 'fade',

  // confirm text
  confirmText: 'confirm',

  // cancel text
  cancelText: 'cancel',

  onConfirm() {
    // confirm callback
  },
  
  onCancel() {
    // cancel callback
  },

  onComplete(isConfirmed) {
    // confirmed callback
  },

  onShow() {
    // show callback
  },

  onShown() {
    // shown callback
  },

  onHide() {
    // hide callback
  },

  onHidden() {
    // hidden callback
  },

});

Changelog:

2024-01-11

• Refactor jQuery-bs-confirm.js for streamlined setup and better event handling

---

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