Updated April 6, 2023

Introduction to jQuery confirm

jQuery confirm is a multipurpose plugin that incorporates the functionalities of alert, confirm and dialog in one.

It offers many more functionalities, some of them are listed below.

Listening to the keyboard keys
Directly loading content via AJAX
Auto-closing of the dialogs after a specified period
Preventing the closing of dialogs on background click
Supports callback function
Themes
Animations and a lot more.

Implementation of jQuery Confirm

Below is the implementation:

Installation

To start using the confirm library, you need to include some source files in your code.

These files can be used either in the following ways.

Using individual files from
Download and installing the files locally on your server.
Using NPM or Bower package manager.

via CDN:

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.css">

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.js"></script>

via Bower:

$ bower install jquery-confirm

via NPM:

$ npm install jquery-confirm

Examples of Jquery Confirm

Here are the following examples mention below

Example #1

Following is a very simple example to demonstrate the working of jQuery confirm.

Code:

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script>
$(document).ready(function () {
$(".member").click(function () {
if (confirm("Are you sure?")) {
alert("Confirmed! Item deleted");
} else alert("Delete Action Canceled!");
});
});
</script>
<style>
div {
margin-left: 500px;
margin-top: 100px;
background-color: lightslategrey;
width: 250px;
height: 150px;
}
.member {
padding-top: 10px;
padding-bottom: 10px;
margin-left: 60px;
margin-top: 50px;
text-align: center;
font-weight: bold;
font-size: medium;
background-color: cadetblue;
}
</style>
<body>
<div>
<button class="member">
Delete Product
</button>
</div>
</body>
</head>
</html>

Output

Below screen displays when the above source code is executed.

A click on the button will pop up a dialog asking the user to confirm the action as shown below.

If clicking on “OK”, the screen shows below pop up.

If clicking on “Cancel”, the screen shows below pop up.

Example #2

Here is another example to demonstrate the usage of confirm.

Code:

<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$(document).ready(function () {
$(".deleteConfirm").click(function () {
var answer = confirm("Are you sure?");
return answer;
});
});
</script>
<style>
div{
margin-left: 300px;
margin-top: 100px;
}
body {
font-family:Georgia, 'Times New Roman', Times, serif;
font-size: 90%;
padding: 1px;
}
a {
color: #0091de;
}
.table {
border-collapse: collapse;
}
.table th {
background-color: lightblue;
padding: 0.8em;
}
.table td {
padding: 0.8em;
}
.table-bordered,
.table-bordered th,
.table-bordered td {
border: 1px solid #bbb;
}
.deleteConfirm {
color:red;
}
</style>
<body>
<div>
<table class="table table-bordered">
<thead>
<tr>
<th>Subject</th>
<th>Marks</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
</tr>
</thead>
<tbody>
<tr>
<td>Maths</td>
<td>80</td>
<td>
<a href="#" class="deleteConfirm">Delete</a>
</td>
</tr>
<tr>
<td>English</td>
<td>85</td>
<td>
<a href="#" class="deleteConfirm">Delete</a>
</td>
</tr>
<tr>
<td>History</td>
<td>90</td>
<td>
<a href="#" class="deleteConfirm">Delete</a>
</td>
</tr>
</tr>
</tbody>
</table>
</div>
</body>
</head>
</html>

Output

The below screen shows when the code is first executed.

On clicking Delete link, the following screen shows up for the confirmation.

Example #3

Let us consider one more example illustrating the usage of jQuery confirm.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery confirm example</title>
<link
rel="stylesheet"
href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/smoothness/jquery-ui.css"
/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script>
$(function () {
$("#dialog").dialog({
autoOpen: false,
modal: true,
buttons: {
Confirm: function () {
alert("You have confirmed!");
},
Cancel: function () {
$(this).dialog("close");
},
},
});
$("#callConfirm").on("click", function (e) {
e.preventDefault();
$("#dialog").dialog("open");
});
});
</script>
<style>
#divstyle {
margin-left: 500px;
margin-top: 100px;
background-color: lightslategrey;
width: 250px;
height: 150px;
}
#callConfirm {
padding-top: 10px;
padding-bottom: 10px;
margin-left: 60px;
margin-top: 50px;
text-align: center;
font-weight: bold;
font-size: medium;
background-color: cadetblue;
}
</style>
</head>
<body>
<div id="divstyle">
<button id="callConfirm">Click to confirm</button>
</div>
<div id="dialog" title="Confirmation Required">
Are you sure about this?
</div>
</body>
</html>

Output

The below screen shows up when the code is first executed.

On clicking the button, a confirmation pop up displays asking the user to confirm the action.

On clicking the “Confirm” button, an alert message displays showing the confirmation.

Example #4

Here is another example illustrating the functionality of confirm plugin

Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery confirm example</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.js"></script>
<script>
$(function () {
var askConfirmation = true;
$('#formname').submit(function(e) {
if (askConfirmation) {
e.preventDefault();
$.confirm({
title: "Confirm Delete",
content: "Are you sure?",
buttons: {
confirm: {
text: "Delete",
btnClass: 'btn-danger',
action: function() {
askConfirmation = false;
alert("The item has been deleted.");
}
},
cancel: {
text: "Cancel",
btnClass: 'btn-default'
}
}
});
}
})
});
</script>
<style>
#divstyle {
margin-left: 500px;
margin-top: 100px;
background-color: lightslategrey;
width: 250px;
height: 150px;
}
#confirm-button {
padding-top: 10px;
padding-bottom: 10px;
margin-left: 60px;
margin-top: 50px;
text-align: center;
font-weight: bold;
font-size: medium;
background-color: cadetblue;
}
</style>
</head>
</head>
<body>
<div id="divstyle">
<form action="#" method="post" id="formname">
<input type="text" name="someinput">
<button id="confirm-button" type="submit">Submit</button>
</form>
</div>
</body>
</html>

Output

Below screen displays when the code is first executed.

On clicking the “Submit” button, the confirmation pop shows up as shown below in the screenshot.

On clicking “ Confirm” an alert message displays showing “ The item has been deleted”.

Conclusion

In this article, we discussed the jQuery confirm plugin which incorporates the functionality of alert, confirm, and dialog in one.
It is a multipurpose plugin for alert, confirm and dialog with many more.
This plugin makes it easy for you to create the alert, confirm, prompt dialog boxes with custom styles & animations.

Quiz Result
Total Questions	Correct Answers	Wrong Answers	Percentage

Introduction to jQuery confirm

Implementation of jQuery Confirm

Examples of Jquery Confirm

Example #1

Example #2

Example #3

Example #4

Conclusion

Recommended Articles

Follow us!

APPS

Blog

Courses

Email