jQuery Confirmation Dialog / Confirm Modal for Bootstrap 4

A lightweight jQuery confirmation dialog plugin for Bootstrap 4. The “Confirm Modal” is a Bootstrap based jQuery plugin that replaces the native JavaScript confirm box with Bootstrap’s modal component. The plugin can be fully customize with its available options (i.e custom text for buttons, heading and size etc).

Plugin Overview

Plugin: Confirm Modal
Author: Tcja
Licence: MIT Licence
Published: May 15, 2019
Repository: Fork on GitHub
Dependencies: jQuery 1.3.1 or Latest version and Bootstrap 4.1.3
File Type: zip archive (HTML, CSS & JavaScript )
Package Size: 14.2 KB

How to Make jQuery Confirmation Dialog:

1. To getting started with Confirm Modal, first of all load the jQuery and Bootstrap 4 framework into your HTML document.

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

<!-- Bootstrap JS -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<!-- Bootstrap CSS -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

2. After that, include the confirm modal’s plugin file.

<!-- Confirm Modal Js -->
<script src="js/jquery.confirmModal.min.js"></script>

3. Now create a button (or whatever you want) in DOM that triggers the confirmation dialog on an event.
In the example below, we are going to create a delete confirmation dialog.

<button class="confirmModal"> Delete </button>

4. Create Confirm Modal in jQuery document ready function with click event using following syntax.

$(document).ready(function(){
 $('.confirmModal').click(function(e) {
      e.preventDefault();              
      $.confirmModal('Are you sure to delete this?', function(el) {
        console.log("Ok was clicked!")
        //do delete operation
      });
    });         
});

Advance Configuration Options for jQuery Confirm Modal

The following are some advance configuration options to create / customize “confirm modal”. You can fully customize the modal popup (i.e its title, buttons text and width etc.) using the following options.

The options implementation with alert message and callback function is as follows:

$.confirmModal("Confirmation Statement", {option: 'value'}, function(){
   //Code to execute after confirm
});

In the upcoming option examples, we’ll only mention option, use them according to the above mentioned method.

Option Description, Default, Type.
confirmButton

Text for confirm button. Default: “Confirm”, Type: String.

$.confirmModal({
   confirmButton: "Custom Text",
});
cancelButton

Define the text for cancel button. Default: “Cancel”, Type: String.

$.confirmModal({
   cancelButton: "Custom Text",
});
messageHeader

Define the text for modal heading. Default: “Call to Action”, Type: String.

$.confirmModal({
    messageHeader: "Confirmation Modal Heading"
});
modalBoxWidth

Set the width for modal in px, rem or in em. Default: “365px”. Type: String.

$.confirmModal({
   modalBoxWidth: "450px",
});
modalVerticalCenter

Decide weather to modal vertically aligned or not. Default: true, Type: Boolean.

$.confirmModal({
   modalVerticalCenter: true,
});
fadeAnimation

This option define the fading (in & out) effects for modal box. Default: true, Type: Boolean.

$.confirmModal({
   fadeAnimation: true,
});
backgroundBlur

Define the background blur effect when modal popup triggers. Default: true, Type: Boolean.

$.confirmModal({
   backgroundBlur: false,
});
autoFocusOnConfirmBtn

Focus “confirm” button when modal will display. Useful for confirming dialog on enter key press. Default: true, Type: Boolean.

$.confirmModal({
   autoFocusOnConfirmBtn: true,
});