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-confirmvia NPM:
$ npm install jquery-confirmExamples 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.
Recommended Articles
This is a guide to Jquery Confirm. Here we discuss the implementation of jQuery confirm along with respective examples for better understanding. You may also look at the following articles to learn more –
