Do you want to be a good Web Developer?

Enter Your Email To Get Our Exclusive Tutorials
And Offer Right In Your Email

Join TalkersCode Community And Recieve Exclusive Tutorials
On Web Development Right Via Email.

Simple And Best Delete Confirmation Message Using jQuery HTML And CSS.

Sunday, Jan 8, 2017

Tags:- 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.


See Demo
Delete Confirmation Message


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.

Join Us With Our 21000+ Subscribers And Get Our Latest Tutorials Update Via Email