✖

All TalkersCode Topics

Follow TalkersCode On Social Media

Simple And Best Delete Confirmation Message Using jQuery HTML And CSS

Last Updated : Apr 15, 2022

IN - jQuery HTML 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.

In this tutorial we will create a Delete Confirmation Message using jQuery, HTML and CSS.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.

CHECK OUT THIS TUTORIAL LIVE DEMO →

Latest Tutorials