jQuery Confirmation Dialog / Confirm Modal for Bootstrap 4

jQuery Confirmation Dialog / Confirm Modal for Bootstrap 4
Code Snippet:
Author:
Published: January 17, 2024
Last Updated: January 22, 2024
Downloads: 16,507
License: MIT
Edit Code online: CodeHim
Read More

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: 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

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,
});

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...

Please Rel0ad/PressF5 this page if you can't click the download/preview link

X