Voeg deze code toe aan de BODY bij aangepaste code

<style>

.popup {

width: 300px;

height: 150px;

background-color: #f2f2f2;

border: 1px solid #ccc;

position: fixed;

bottom: 20px;

left: 20px;

box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);

border-radius: 8px;

display: flex;

flex-direction: column;

justify-content: space-between;

padding: 10px;

animation: slideIn 0.5s ease;

z-index: 1000;

}



@keyframes slideIn {

from {

transform: translateY(200%);

}

to {

transform: translateY(0);

}

}



.popup-header {

display: flex;

justify-content: space-between;

align-items: center;

}



.popup-header .close-btn {

background: none;

border: none;

font-size: 16px;

font-weight: bold;

cursor: pointer;

color: #555;

}



.popup-header .close-btn:hover {

color: #000;

}



.popup-body {

flex-grow: 1;

margin-top: 10px;

font-size: 14px;

}



.popup-footer {

text-align: center;

}



.popup-footer .action-btn {

background-color: #007bff;

color: white;

padding: 8px 12px;

border: none;

border-radius: 4px;

text-decoration: none;

font-size: 14px;

cursor: pointer;

}



.popup-footer .action-btn:hover {

background-color: #0056b3;

}

</style>

<div class="popup" id="popup">

<div class="popup-header">

<span>Belangrijk bericht</span>

<button class="close-btn" id="closePopupBtn">×</button>

</div>

<div class="popup-body">

Dit is een korte zin om je aandacht te trekken.

</div>

<div class="popup-footer">

<a href="https://example.com" target="_blank" class="action-btn">Lees meer</a>

</div>

</div>

<script>

document.addEventListener("DOMContentLoaded", function () {

const closeBtn = document.getElementById("closePopupBtn");

const popup = document.getElementById("popup");



closeBtn.addEventListener("click", function () {

popup.style.display = "none";

});

});

</script>