Simple And Best Delete Confirmation Message Using jQuery HTML And CSS
Last Updated : Apr 15, 2022
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.
CHECK OUT THIS TUTORIAL LIVE DEMO →
To Create Delete Confirmation Message It Takes Two steps:-
- Make a HTML file and write markup and script for Delete Confirmation Message
- 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.
Latest Tutorials
- Create Animated Skill Bar Using jQuery, HTML And CSS
- Simple And Best Responsive Web Design Using CSS Part 2
- Show Button On Hover Using HTML And CSS
- Material Design Login Form Using jQuery And CSS
- Animated Progress Bar Using jQuery And CSS
- Dynamic Drop Down Menu Using jQuery, Ajax, PHP And MySQL
- Get Website Statistics Using PHP, jQuery And MySQL
- HTML5 Login And Signup Form With Animation Using jQuery
- Facebook Style Homepage Design Using HTML And CSS
- View Webpage In Fullscreen Using jQuery