Hoe OM - Verwyder Modal
Leer hoe om 'n uitveebevestigingsmodaal met CSS te skep.
Klik op die knoppie om die modaal oop te maak:
×
Hoe om 'n Delete Modal te skep
Stap 1) Voeg HTML by:
Voorbeeld
<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>
Stap 2) Voeg CSS by:
Voorbeeld
* {box-sizing: border-box}
/* Set a style for all buttons */
button
{
background-color: #04AA6D;
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%;
}
}
Wenk: Jy kan ook die volgende javascript gebruik om die modaal te sluit deur buite die modale inhoud te klik (en nie net deur die "x" of "kanselleer" knoppie te gebruik om dit toe te maak nie):
Voorbeeld
<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>