MKS_269
Console Collector
2
MONTHS
2 2 MONTHS OF SERVICE
LEVEL 1
300 XP
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.
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.
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 :)
Download
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 :)
Download
You must upgrade your account or reply in the thread to view hidden text.