Confirm User Intention Using Bootstrap Confirmation Modal

Confirm User Intention Using Bootstrap Confirmation Modal
File Size: 6.11 KB
Views Total: 312
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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

Created using jQuery library and Bootstrap 4'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 Confirmation Modal -->
<script src="src/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
  }
});

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