Custom Confirmation Modal in JavaScript Tutorial

Submitted by oretnom23 on Saturday, June 4, 2022 - 16:53.

This tutorial tackles about Creating a Custom Confirmation Modal in JavaScript. This is a dynamic confirmation message which allows your user to confirm first before executing the JS function. This can be used for some action or feature in your current or future web application projects such as delete operations. The confirmation feature before executing an action in a web application can help your user to prevent unintentional execution of the action.

Here, I will be providing a simple application that explains the main goal of this tutorial. In the application, the confirmation has 3 options which are execute function, execute the function with a single parameter, and execute a function with multiple paramater. Before we proceed to the coding part, please make sure that your device is connected to the internet due the source code uses CDNs for the external libraries.

Lets do the coding...

Create Main Interface

In your preferred text editor, create a new HTML file naming index.html. This file contains the script of the elements which outputs a simple page with 4 different buttons and modal element. Since the we are creating a dynamic confirmationa modal, we'll be only needing 1 confirmation modal container.

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Custom Confirmation Modal</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
    <script src="./script.js"></script>
</head>
 
<body>
    <div class="container py-5">
        <h3 class="text-center">Custom Confimation Modal</h3>
        <hr>
        <div class="text-center">
            <div class="row row-cols-xl-6 row-cols-md-4 row-col-xs-2 justify-content-center gx-2 gy-3">
                <button class="btn btn-primary bg-gradient-primary mx-2 my-3" type="button" id="action1">Action 1</button>
                <button class="btn btn-light bg-gradient-light border mx-2 my-3" type="button" id="action2">Action 2</button>
                <button class="btn btn-info bg-gradient-info mx-2 my-3" type="button" id="action3">Action with Single Parameter</button>
                <button class="btn btn-warning bg-gradient-warning mx-2 my-3" type="button" id="action4">Action with Multiple Parameter</button>
            </div>
        </div>
    </div>
    <div class="modal fade" id="confirm_modal" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered rounded-0">
            <div class="modal-content rounded-0">
                <div class="modal-header py-1">
                    <h5 class="modal-title">Confirmation</h5>
                </div>
                <div class="modal-body">
                </div>
                <div class="modal-footer py-1">
                    <button type="button" class="btn btn-primary btn-sm rounded-0 py-1" id="confirm-btn">Confirm</button>
                    <button type="button" class="btn btn-secondary btn-sm rounded-0 py-1" data-bs-dismiss="modal">Cancel</button>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="action_display" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered rounded-0">
            <div class="modal-content rounded-0">
                <div class="modal-header py-1">
                    <h5 class="modal-title">Action Result</h5>
                </div>
                <div class="modal-body">
                </div>
                <div class="modal-footer py-1">
                    <button type="button" class="btn btn-secondary btn-sm rounded-0 py-1" data-bs-dismiss="modal">Cancel</button>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Creating the Main Action

Below is the JavaScript code that contains the scripts that makes our goal in this tutotial possible. Create a new file naming script.js and copy/paste the source code below.

function action1() {
    var result = "Action 1 has been clicked";
    var action_display = $('#action_display')
    action_display.find('.modal-body').html(result)
    action_display.modal('show')
}
 
function action2() {
    var result = "Action 2 has been clicked";
    var action_display = $('#action_display')
    action_display.find('.modal-body').html(result)
    action_display.modal('show')
}
 
function action3($param1 = '') {
    var result = "Action 3 has been clicked. Parameter = " + $param1;
    var action_display = $('#action_display')
    action_display.find('.modal-body').html(result)
    action_display.modal('show')
 
}
 
function action4($param1 = '', $param2 = '') {
    var result = "Action 1 has been clicked. parameter 1 = \'" + $param1 + "\', parameter 2 = \'" + $param2 + "\'";
    var action_display = $('#action_display')
    action_display.find('.modal-body').html(result)
    action_display.modal('show')
 
}
window._confirm = function($message = '', $func = '', $param = []) {
    if ($func != '' && typeof window[$func] == 'function') {
 
        var modal_el = $('#confirm_modal')
        modal_el.find('.modal-body').html($message)
        modal_el.modal('show')
        modal_el.find('#confirm-btn').click(function(e) {
            e.preventDefault()
            if ($param.length > 0 && !!$.isArray($param))
                window[$func].apply(this, $param)
            else
                window[$func]($param)
            modal_el.modal('hide')
        })
    } else {
        alert("Function does not exists.")
    }
}
$(function() {
    $("#action1").click(function() {
        _confirm("Are you sure to continue to execute action 1?", 'action1')
    })
    $("#action2").click(function() {
        _confirm("Are you sure to continue to execute action 2?", 'action2')
    })
    $("#action3").click(function() {
        _confirm("Are you sure to continue to execute action 3?", 'action3', 'Single Parameter')
    })
    $("#action4").click(function() {
        _confirm("Are you sure to continue to execute action 4?", 'action4', ['Hello World!', "SourceCodester"])
    })
})

As you can see at the script above, window._confirm() function is the script for executing our custom confirmation modal. It has 3 parameters which are first the message, next the function name to be executed when confirmed, and lastly is the function parameter. The function parameter is optional, which can be a string or an integer. But for sending multiple parameters to the function, please ensure that your 3rd parameter for _confirm() function is an Array.

That's it! You can now test the application and see if it achieves our goal for this tutorial. If there's an error occurred on your end, please review your source code with my provided source code scripts above. You may also download the working source code file that I created for this tutorial by clicking the download button below.

I hope this Custom Confirmation Modal in JS Tutorial helps you with what you are looking for and useful for your future projects. Explore more on this website for more Tutorals and Free Source Codes.

Happy Coding :)

Add new comment

579 views