Confirm User Intention Using Bootstrap Confirmation Modal

A fully customizable confirmation dialog component that provides a quick way to confirm user intentions in your Bootstrap 4 or Bootstrap 5 powered sites or web apps.

Created using jQuery library and Bootstrap's modal component.

How to use it:

1. To begin with, load the minified version of the Bootstrap Confirmation Modal plugin in your Bootstrap project.

<!-- jQuery + Bootstrap -->
<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/cdn/bootstrap.bundle.min.js"></script>
<!-- Bootstrap 5 Confirmation Modal -->
<script src="src/v5/bootstrap-confirmation-modal.min.js"></script>
<!-- Bootstrap 4 Confirmation Modal -->
<script src="src/v4/bootstrap-confirmation-modal.min.js"></script>

2. Initialize the plugin and config the Bootstrap Confirmation Dialog with the following parameters.

• title: Dialog Title
• closeIcon: Determine whether to show the close icon. Default: false.
• message: Confirm message
• no: Customize the Reject button
• yes: Customize the Confirm button
• yesCallBack: Triggered when confirmed
• noCallBack: Triggered when rejected

bootstrapConfirmation({
  config: {
    title: 'Confirm Title',
    closeIcon: true,
    message: 'Are You Sure?',
    no: {
      class: 'btn btn-danger',
      text: 'Cancel'
    },
    yes: {
      class: 'btn btn-success',
      text: 'Okay'
    }
  }
  yesCallBack: function () {
    // confirmed
  },
  noCallBack: function () {
    // canceld
  }
});

Changelog:

2024-01-14

• ModalFooter - Changed the configuration to allow the no/yes buttons to be a boolean in v4.

2024-01-14

• v2.2: refactor

2023-08-31

• v2.1: refactor

2023-05-06

• PromiseBased - Update v4 to use a JavaScript promise.

2023-05-05

• Bugfix

2021-07-17

• Updated for Bootstrap 5

---

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