Confirm An Action Using Bootstrap Modal Component - confirmModal

confirmModal is a small jQuery/Bootstrap 4 plugin that simplifies the task of creating customizable confirmation dialog boxes using Bootstrap 4's modal component.

More features:

• Custom confirm/cancel text.
• Allows to vertically center the confirm dialog.
• Fade in/out animations.
• Blurs the background content when the dialog is activated.
• Auto moves the focus to the confirm button.

How to use it:

1. To get started, you first need to load the latest jQuery and Bootstrap 4 framework in the html document.

<link rel="stylesheet" href="/path/to/bootstrap.min.css">
<script src="/path/to/jquery.slim.min.js"></script>
<script src="/path/to/bootstrap.min.js"></script>

2. Download and load the minified version of the confirmModal plugin after Bootstrap's JS.

<script src="js/jquery.confirmModal.min.js"></script>

3. Create a basic confirm dialog and perform an action when the users clicks the confirm button.

$.confirmModal('Are you sure?',function(el) {
  // do something
});

4. Customize the label text of the confirm/cancel buttons. You can pass the options object as the second parameter to the $.confirmModal function.

$.confirmModal('Are you sure?',{
  confirmButton: 'Sure',
  cancelButton: 'No Thanks'
},function(el) {
  // do something
});

5. Apply a blur effect to specific elements when the confirm dialog is triggered.

$.confirmModal('Are you sure?',{
  backgroundBlur: ['.container, header, footer']
},function(el) {
  // do something
});

6. Enable/disable the fade in/out animations.

$.confirmModal('Are you sure?',{
  fadeAnimation: true
},function(el) {
  // do something
});

7. Set the max width of the confirm dialog.

$.confirmModal('Are you sure?',{
  modalBoxWidth: '400px'
},function(el) {
  // do something
});

8. Determine whether to center the confirm dialog vertically.

$.confirmModal('Are you sure?',{
  modalVerticalCenter: true
},function(el) {
  // do something
});

9. Determine whether to auto focus on the confirm button when the confirm dialog is triggered.

$.confirmModal('Are you sure?',{
  autoFocusOnConfirmBtn: true
},function(el) {
  // do something
});

10. Customize the header text displayed at the top of the confirm dialog .

$.confirmModal('Are you sure?',{
  messageHeader: 'jQueryScript'
},function(el) {
  // do something
});

Changelog:

v1.1 (2019-06-11)

• The blur effect now has its own CSS rule-set in the name of .cmBackgroundBlur so it won't overwrite pre-existing CSS rules in the style tag.

---

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