How TO - Delete Modal
Learn how to create a delete confirmation modal with CSS.
Click on the button to open the modal:
×
How To Create a Delete Modal
Step 1) Add HTML:
Example
<button onclick="document.getElementById('id01').style.display='block'">Open
Modal</button>
<div id="id01" class="modal">
<span
onclick="document.getElementById('id01').style.display='none'" class="close"
title="Close Modal">×</span>
<form class="modal-content"
action="/action_page.php">
<div class="container">
<h1>Delete Account</h1>
<p>Are you sure
you want to delete your account?</p>
<div class="clearfix">
<button
type="button"
class="cancelbtn">Cancel</button>
<button type="button"
class="deletebtn">Delete</button>
</div>
</div>
</form>
</div>
Step 2) Add CSS:
Example
* {box-sizing: border-box}
/* Set a style for all buttons */
button
{
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
opacity: 0.9;
}
button:hover {
opacity:1;
}
/* Float cancel and delete
buttons and add an equal width */
.cancelbtn, .deletebtn {
float:
left;
width: 50%;
}
/* Add a color to the cancel button */
.cancelbtn {
background-color: #ccc;
color: black;
}
/* Add a color to the delete button */
.deletebtn {
background-color: #f44336;
}
/* Add padding and center-align text to
the container */
.container {
padding: 16px;
text-align: center;
}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in
place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /*
Full height */
overflow: auto; /* Enable scroll if needed */
background-color: #474e5d;
padding-top: 50px;
}
/* Modal
Content/Box */
.modal-content {
background-color: #fefefe;
margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered
*/
border: 1px solid #888;
width: 80%; /* Could be more or
less, depending on screen size */
}
/* Style the horizontal ruler */
hr {
border: 1px solid #f1f1f1;
margin-bottom: 25px;
}
/* The Modal Close Button (x) */
.close {
position: absolute;
right: 35px;
top: 15px;
font-size: 40px;
font-weight: bold;
color: #f1f1f1;
}
.close:hover,
.close:focus {
color: #f44336;
cursor: pointer;
}
/* Clear floats */
.clearfix::after {
content: "";
clear: both;
display: table;
}
/* Change styles for cancel
button and delete button on extra small screens */
@media screen and
(max-width: 300px) {
.cancelbtn, .deletebtn {
width: 100%;
}
}
Try it Yourself »
Tip: You can also use the following javascript to close the modal by clicking outside of the modal content (and not just by using the "x" or "cancel" button to close it):
Example
<script>
// Get the modal
var modal = document.getElementById('id01');
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target ==
modal) {
modal.style.display =
"none";
}
}
</script>
Try it Yourself »
