2

Create a Delete Modal using HTML and CSS

 9 months ago
source link: https://www.geeksforgeeks.org/create-a-delete-modal-using-html-and-css/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

Create a Delete Modal using HTML and CSS

Discuss
Courses

This article will show you how to create a delete confirmation modal using HTML and CSS. The delete confirmation modal is used to display the popup confirmation modal before deleting the element.

Create a Delete Modal

Here, we use HTML to create the modal structure, and CSS add styles to the modal box. To hide the modal box, we use display: none; property.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<style>
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
.modal-container {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
align-items: center;
justify-content: center;
z-index: 1;
}
.modal-content {
background-color: #fff;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
max-width: 400px;
width: 100%;
padding: 20px;
text-align: center;
}
button {
border: none;
}
h2 {
color: #515151;
}
.confirmation-message {
margin-bottom: 20px;
}
.button-container {
display: flex;
justify-content: space-around;
}
.button {
padding: 10px 20px;
font-size: 16px;
text-align: center;
text-decoration: none;
border-radius: 5px;
cursor: pointer;
}
.cancel-button {
background-color: #ccc;
color: #535353;
}
.delete-button {
background-color: #e74c3c;
color: #fff;
}
</style>
<title>Delete Confirmation Modal</title>
</head>
<body>
<button id="showModalBtn" 
class="button delete-button">
Show Delete Confirmation
</button>
<div id="modal" class="modal-container">
<div class="modal-content">
<h2>Delete Confirmation</h2>
<p class="confirmation-message">
Are you sure you want to delete this item?
</p>
<div class="button-container">
<button id="cancelBtn" 
class="button cancel-button">
Cancel
</button>
<button id="deleteBtn" 
class="button delete-button">
Delete
</button>
</div>
</div>
</div>
<script>
// Get modal and buttons
const modal = document.getElementById('modal');
const showModalBtn = document.getElementById('showModalBtn');
const cancelBtn = document.getElementById('cancelBtn');
const deleteBtn = document.getElementById('deleteBtn');
// Show modal function
function showModal() {
modal.style.display = 'flex';
}
// Hide modal function
function hideModal() {
modal.style.display = 'none';
}
// Attach click event listeners
showModalBtn.addEventListener('click', showModal);
cancelBtn.addEventListener('click', hideModal);
deleteBtn.addEventListener('click', hideModal);
</script>
</body>
</html>

Output:

delete-confirmation-box
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out - check it out now!
Last Updated : 13 Dec, 2023
Like Article
Save Article

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK