Introduction
A delete modal is a confirmation pop-up that asks users to confirm their action before deleting data. It's a useful design pattern to prevent accidental deletions and ensure users are aware of their actions. In this guide, you'll learn how to create a simple and responsive delete modal using HTML, CSS, and JavaScript.
Development Steps
- Create Basic HTML Structure: Set up the HTML elements for the delete modal and a button to trigger it.
- Style the Delete Modal with CSS: Use CSS to style the modal box, overlay, and buttons.
- Add JavaScript for Modal Functionality: Use JavaScript to open and close the modal box and handle the delete confirmation.
Step 1: Create a Basic HTML Structure
We’ll start by creating the basic structure of the delete modal, including a button to trigger it and options for confirming or cancelling the delete action.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Delete Modal Example</title>
</head>
<body>
<!-- Step 1: Button to trigger the delete modal -->
<button id="deleteBtn" class="open-modal-btn">Delete Item</button>
<!-- Step 1: Delete modal structure -->
<div id="deleteModal" class="modal">
<div class="modal-content">
<span id="closeModalBtn" class="close-btn">×</span>
<h2>Confirm Delete</h2>
<p>Are you sure you want to delete this item? This action cannot be undone.</p>
<div class="modal-actions">
<button id="confirmDeleteBtn" class="confirm-btn">Delete</button>
<button id="cancelDeleteBtn" class="cancel-btn">Cancel</button>
</div>
</div>
</div>
</body>
</html>
Explanation:
- Delete Trigger: A button (
#deleteBtn) is created to open the delete confirmation modal when clicked. - Modal Structure: The modal consists of a container (
#deleteModal) and adivcontaining the modal's content (confirmation message and two buttons: one to confirm deletion and one to cancel). - Close Button: The close button (
×) allows users to close the modal without performing any action.
Step 2: Style the Delete Modal with CSS
Next, we’ll style the modal box, overlay, buttons, and content using CSS to ensure it’s centered and visually appealing.
<head>
<style>
/* General body styles */
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f4f4f4;
margin: 0;
}
/* Button styles */
.open-modal-btn {
padding: 10px 20px;
background-color: #e74c3c;
color: white;
border: none;
cursor: pointer;
border-radius: 5px;
font-size: 16px;
}
/* Modal styles */
.modal {
display: none; /* Hidden by default */
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
justify-content: center;
align-items: center;
z-index: 1000;
}
.modal-content {
background-color: white;
padding: 20px;
border-radius: 8px;
width: 80%;
max-width: 400px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
text-align: center;
}
.close-btn {
font-size: 24px;
font-weight: bold;
color: #333;
cursor: pointer;
position: absolute;
top: 10px;
right: 20px;
}
.modal-actions {
margin-top: 20px;
}
.confirm-btn {
padding: 10px 20px;
background-color: #e74c3c;
color: white;
border: none;
cursor: pointer;
border-radius: 5px;
margin-right: 10px;
}
.cancel-btn {
padding: 10px 20px;
background-color: #3498db;
color: white;
border: none;
cursor: pointer;
border-radius: 5px;
}
/* Optional: Add some styling for small screens */
@media (max-width: 768px) {
.modal-content {
width: 90%;
}
}
</style>
</head>
Explanation:
- Modal Box: The
.modalis initially hidden withdisplay: none, and when displayed, it covers the entire screen with a semi-transparent background. - Modal Content: The
.modal-contenthas a white background, is centered on the screen, and is styled with a shadow for a 3D effect. - Buttons: The "Delete" button (
.confirm-btn) is styled with a red background, and the "Cancel" button (.cancel-btn) has a blue background.
Step 3: Add JavaScript for Modal Functionality
Now we’ll add JavaScript to handle the opening and closing of the modal, and also provide functionality for the "Delete" and "Cancel" buttons.
<script>
// Get the modal, open button, close button, and action buttons
const modal = document.getElementById('deleteModal');
const deleteBtn = document.getElementById('deleteBtn');
const closeModalBtn = document.getElementById('closeModalBtn');
const confirmDeleteBtn = document.getElementById('confirmDeleteBtn');
const cancelDeleteBtn = document.getElementById('cancelDeleteBtn');
// Open the modal when the delete button is clicked
deleteBtn.addEventListener('click', function() {
modal.style.display = 'flex'; // Show the modal (flex to center content)
});
// Close the modal when the close button or cancel button is clicked
closeModalBtn.addEventListener('click', function() {
modal.style.display = 'none'; // Hide the modal
});
cancelDeleteBtn.addEventListener('click', function() {
modal.style.display = 'none'; // Hide the modal
});
// Handle the delete action (here we'll log it, but you can add your actual delete logic)
confirmDeleteBtn.addEventListener('click', function() {
console.log("Item deleted.");
modal.style.display = 'none'; // Hide the modal after deletion
});
// Close the modal when clicking outside the modal content
window.addEventListener('click', function(event) {
if (event.target === modal) {
modal.style.display = 'none'; // Hide the modal if clicking outside
}
});
</script>
Explanation:
- Opening the Modal: When the "Delete Item" button is clicked, the modal is displayed using
modal.style.display = 'flex'. - Closing the Modal: The modal can be closed by clicking the close button (
×), the "Cancel" button, or clicking outside the modal content. - Delete Action: When the "Delete" button is clicked, the modal closes and a message is logged to the console. You can replace the
console.logwith actual delete logic (e.g., an API call or database update).
Complete Example
Here’s the complete HTML, CSS, and JavaScript code for a fully functional delete modal:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Delete Modal Example</title>
<style>
/* General body styles */
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f4f4f4;
margin: 0;
}
/* Button styles */
.open-modal-btn {
padding: 10px 20px;
background-color: #e74c3c;
color: white;
border: none;
cursor: pointer;
border-radius: 5px;
font-size: 16px;
}
/* Modal styles */
.modal {
display: none; /* Hidden by default */
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
justify-content: center;
align-items: center;
z-index: 1000;
}
.modal-content {
background-color: white;
padding: 20px;
border-radius: 8px;
width: 80%;
max-width: 400px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
text-align: center;
}
.close-btn {
font-size: 24px;
font-weight: bold;
color: #333;
cursor: pointer;
position: absolute;
top: 10px;
right: 20px;
}
.modal-actions {
margin-top: 20px;
}
.confirm-btn {
padding: 10px 20px;
background-color: #e74c3c;
color: white;
border: none;
cursor: pointer;
border-radius: 5px;
margin-right: 10px;
}
.cancel-btn {
padding: 10px 20px;
background-color: #3498db;
color: white;
border: none;
cursor: pointer;
border-radius: 5px;
}
/* Optional: Add some styling for small screens */
@media (max-width: 768px) {
.modal-content {
width: 90%;
}
}
</style>
</head>
<body>
<!-- Step 1: Button to trigger the delete modal -->
<button id="deleteBtn" class="open-modal-btn">Delete Item</button>
<!-- Step 1: Delete modal structure -->
<div id="deleteModal" class="modal">
<div class="modal-content">
<span id="closeModalBtn" class="close-btn">×</span>
<h2>Confirm Delete</h2>
<p>Are you sure you want to delete this item? This action cannot be undone.</p>
<div class="modal-actions">
<button id="confirmDeleteBtn" class="confirm-btn">Delete</button>
<button id="cancelDeleteBtn" class="cancel-btn">Cancel</button>
</div>
</div>
</div>
<script>
// Get the modal, open button, close button, and action buttons
const modal = document.getElementById('deleteModal');
const deleteBtn = document.getElementById('deleteBtn');
const closeModalBtn = document.getElementById('closeModalBtn');
const confirmDeleteBtn = document.getElementById('confirmDeleteBtn');
const cancelDeleteBtn = document.getElementById('cancelDeleteBtn');
// Open the modal when the delete button is clicked
deleteBtn.addEventListener('click', function() {
modal.style.display = 'flex'; // Show the modal (flex to center content)
});
// Close the modal when the close button or cancel button is clicked
closeModalBtn.addEventListener('click', function() {
modal.style.display = 'none'; // Hide the modal
});
cancelDeleteBtn.addEventListener('click', function() {
modal.style.display = 'none'; // Hide the modal
});
// Handle the delete action (here we'll log it, but you can add your actual delete logic)
confirmDeleteBtn.addEventListener('click', function() {
console.log("Item deleted.");
modal.style.display = 'none'; // Hide the modal after deletion
});
// Close the modal when clicking outside the modal content
window.addEventListener('click', function(event) {
if (event.target === modal) {
modal.style.display = 'none'; // Hide the modal if clicking outside
}
});
</script>
</body>
</html>
Output
You can play with the above HTML in Online HTML Editor and Compiler. Here is the output of the above HTML page.:
Conclusion
In this tutorial, you learned how to create a delete confirmation modal using HTML, CSS, and JavaScript. The modal provides a clear prompt to users, ensuring they confirm the deletion before proceeding. This basic modal structure can be customized and enhanced to fit various use cases, such as deleting records, files, or other data in your application.
Comments
Post a Comment
Leave Comment