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:
HTML
<!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: