Confirm User Intention Using Bootstrap Confirmation Modal

File Size: 12.1 KB
Views Total: 2073
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
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

  • 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.