jQuery Confirmation Dialog / Confirm Modal for Bootstrap 4

Plugin Preview

Share this:

How to start using jQuery?

More jQuery Top, Best and New Plugins

Top 100 jQuery Plugins

Plugin Overview

Plugin:	Confirm Modal
Author:	Tcja
Licence:	MIT Licence
Published:	January 17, 2024
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

Demo Download

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.

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

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

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

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

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

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

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

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

Asif Mughal

I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.