Introduction
This tutorial shows you how to create a custom confirmation modal in JavaScript. This is a dynamic confirmation message that the user can see first before executing her JS function. This can be used for some action or feature in your current or future web application projects. B. Delete Operation. Confirmation before performing an action in a web application helps prevent users from unintentionally performing an action.
Here we provide a simple application that demonstrates the main purpose of this tutorial. The application has three options for confirmation. The source code uses a CDN for external libraries, so make sure your device is connected to the internet before proceeding with the coding part.
Let’s start the coding.
Develop the main interface
Create a new HTML file named index.html in your favorite text editor. This file contains scripts for elements that render a simple page with four different buttons and a modal element. Since we are creating a dynamic confirmation modal, we only need one 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/bootstrap@5.2.0-beta1/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/bootstrap@5.2.0-beta1/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>Making the primary action
Below is the JavaScript code containing the script that achieves the goals of this tutorial. Create a new file named script.js and copy and paste the following source code.
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 in the script above, the window._confirm() function is the script that runs the custom confirmation modal. There are three parameters: first the message, then the name of the function to run upon confirmation, and finally the function parameters. Function parameters are optional and can be strings or integers. But to send multiple parameters to the function, check the third parameter in _confirm() Functions are arrays.
that’s it! Now you can test your application to see if it meets the goals of this tutorial. If you get an error, check the source code in the source code script above. You can also download the actual source code file created for this tutorial by clicking the download button below.
I hope this JS tutorial custom confirmation modal helps what you are looking for and helps you in your future projects. For more tutorials and free source code, please visit this site.