✖

All TalkersCode Topics

Follow TalkersCode On Social Media

✖

Simple And Best Delete Confirmation Message Using jQuery HTML And CSS

Last Updated : Jul 1, 2023

IN - jQuery HTML CSS | Written & Updated By - Anjali

In this tutorial we will create a Delete Confirmation Message using jQuery, HTML and CSS, Delete is no recovering process if a user delete something it will not recover.

So there must be Confirmation message so that if a user mistakenly or intentionally clicks on delete button a confirmation message slides down and ask the user whether he or she want to delete something.

You may also like session timeout warning using PHP and jQuery.

Simple And Best Delete Confirmation Message Using jQuery HTML And CSS

CHECK OUT THIS TUTORIAL LIVE DEMO →

To Create Delete Confirmation Message It Takes Two steps:-

  1. Make a HTML file and write markup and script for Delete Confirmation Message
  2. Make a CSS file and define styling for Delete Confirmation Message

Step 1. Make a HTML file and write markup and script for Delete Confirmation Message

We make a HTML file and save it with a name message.html 

<html>
<head>
<link rel="stylesheet" type="text/css" href="message_style.css">
<script type="text/javascript" src="jquery.js">
<script type="text/javascript">

$(document).ready(function(){
  $("#test_delete").click(function(){
    message();
  });
  $("#cancel").click(function(){
    hide();
  });
});
	
function message()
{
  $("#delete_message").slideDown();
}

function hide()
{
  $("#delete_message").slideUp();
}
</script>

</head>

<body>

  <div id="delete_message">
    <h2>Are You Sure You Want To Delete This</h2>
    <input type="button" value="Delete" id="delete">
    <input type="button" value="Cancel" id="cancel">
  </div>
  
  <h1>Simple And Best Delete Confirmation Message Using jQuery,HTML And CSS</h1>
  <center>
    <input type="button" id="test_delete" value="Click To Test Delete Confirmation Message">
  </center>
  
</body>
</html>

In this step we make a confirmation message div which is hidden and on this we made two buttons both are just for testing purpose and we make a third button to show the confirmation message.

We use jQuery slideUp(); and slideDown(); functions for showing and hiding message with animation you can use any kind of effect.

You may also like simple notification bar using jQuery.

Step 2. Make a CSS file and define styling for Delete Confirmation Message

We make a CSS file and save it with name message_style.css. 

body
{
	margin:0px;
	padding:0px;
	background-color:#E6E6E6;
	font-family:helvetica;
}
#delete_message
{
	display:none;
	position:fixed;
	top:0px;
	width:100%;
	height:150px;
	background-color:#5882FA;
	text-align:center;
}
#delete_message h2
{
	color:#0431B4;
}
#delete,#cancel
{
	border:none;
	background:none;
	width:100px;
	height:40px;
	font-size:18px;
	border-radius:5px;
	border:2px solid white;
	margin:10px;
	color:#CED8F6;
}
h1
{
	text-align:center;
	margin-top:200px;
	color:#819FF7;
	width:600px;
	margin-left:200px;
}
#test_delete
{
	border:none;
	background:none;
	width:400px;
	height:50px;
	font-size:18px;
	border-radius:5px;
	border:2px solid #819FF7;
	margin:10px;
	color:#045FB4;
}

Thats all, this is how to Create a Delete Confirmation Message Using jQuery,HTML and CSS. You can customize this code further as per your requirement. And please feel free to give comments on this tutorial.

I hope this tutorial on delete confirmation message box in jquery helps you and the steps and method mentioned above are easy to follow and implement.

CHECK OUT THIS TUTORIAL LIVE DEMO →