Bonjour A tous,
voici un code pour un popup, seulement la croix de fermeture ne fonctionne pas, il me semble qu'il n'y a pas de relation entre le JS et le code html.
Je comprend pas le fonctionnement entre le custom code et les scripts dans le HTML head.
Voici un lien:
https://6598225b6247541eb2c2e0cc--fabulous-souffle-c7c23e.netlify.app/
les codes
HTML head
<script>
// Fonction pour afficher le pop-up
function showPopup() {
document.querySelector('.popup-overlay').style.display = 'flex';
}
// Fonction pour fermer le pop-up en cliquant sur le bouton X
function closePopup() {
document.querySelector('.popup-overlay').style.display = 'none';
}
// Afficher le pop-up au chargement de la page
window.onload = showPopup;
</script>
Custom code
<div class="popup-overlay">
<div class="popup-content">
<span class="close-btn" onclick="closePopup()">X</span>
<h2>Le Pop-up pour Silex v3
</h2>
<img src="/assets/picto-silex@3x.png" alt="Silex v3">
<p>Bienvenu sur Silex v3
</p>
</div>
</div>
<style>
/* Styles pour le pop-up */
.popup-overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
justify-content: center;
align-items: center;
}
.popup-content {
background-color: #fff;
width: 50%;
padding: 20px;
border-radius: 8px;
text-align: center;
position: relative;
}
.close-btn {
position: absolute;
top: 5px;
right: 10px;
cursor: pointer;
}
</style>
