Want To Be A Blogger  →  Start A Blog  →  Increase Traffic  →  Make Money Online  →  Recommended Things

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

Friday, Dec 15, 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.

Subscribe Our Newsletter And Get Tutorials And Offers Via Email

About Me


Hello, My Name is Mudit Jain. I am a Web Developer, Professional Blogger and Digital Marketer from India. I am the founder of TalkersCode. I started this blog in february 2015 to help web developers & bloggers by providing easy and best tutorials, articles and offers for web developers and bloggers.