// Wanneer de knop wordt aangeklikt, wordt de pop-up zichtbaar
document.getElementById("myBtn").onclick = function() {
document.getElementById("popupForm").style.display = "flex"; // Pop-up zichtbaar maken
}
// Wanneer de gebruiker op de sluitknop in de pop-up klikt, wordt de pop-up verborgen
document.getElementsByClassName("close")[0].onclick = function() {
document.getElementById("popupForm").style.display = "none";
}
// Wanneer de gebruiker buiten de pop-up klikt, wordt de pop-up ook verborgen
window.onclick = function(event) {
if (event.target == document.getElementById("popupForm")) {
document.getElementById("popupForm").style.display = "none";
}
}
#popupForm {
display: none; /* Pop-up is standaard verborgen */
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.7); /* Transparante achtergrond */
z-index: 1000;
justify-content: center;
align-items: center;
}
#popupForm .content {
background-color: white;
padding: 20px;
border-radius: 5px;
width: 400px; /* Pas dit aan naar jouw voorkeur */
margin: auto;
}
#popupForm .close {
color: #aaa;
font-size: 28px;
font-weight: bold;
position: absolute;
top: 10px;
right: 20px;
}
#popupForm .close:hover,
#popupForm .close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
