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.

 $('.confirmModal').click(function(e) {
      $.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.

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

   confirmButton: "Custom Text",

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

   cancelButton: "Custom Text",

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

    messageHeader: "Confirmation Modal Heading"

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

   modalBoxWidth: "450px",

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

   modalVerticalCenter: true,

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

   fadeAnimation: true,

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

   backgroundBlur: false,

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

   autoFocusOnConfirmBtn: true,

Be the first to comment

Leave a Reply

Your email address will not be published.