Comment créer un modal natif dans Webflow sans plugin ?
Apprenez à créer une modal (pop-up) native dans Webflow sans plugin : overlay, ouverture au clic et fermeture.
Dans ce tutoriel, Sandro cofondateur de l'agence Webflow Gemeos vous montre comment créer une modal (pop-up) native dans Webflow sans plugin, avec ouverture au clic et fermeture en cliquant l'overlay.
Exemple
| Élément | Classe CSS | Rôle |
|---|---|---|
| Overlay | modal-overlay | Fond semi-transparent, couvre toute la page |
| Boîte modale | modal-box | Le contenu de la modal |
| Bouton ouverture | open-modal | Déclencheur d'ouverture |
| Bouton fermeture | close-modal | Ferme la modal |
1. Créez la structure de la modal
Créez un Div modal-overlay en position Fixed, couvrant toute la page (top/left/right/bottom: 0), background rgba(0,0,0,0.5), display: none, z-index: 1000. À l'intérieur, ajoutez un Div modal-box centré (margin: auto). Ajoutez un bouton close-modal dans la modal-box. Créez un bouton open-modal ailleurs dans votre page.
2. Ajoutez ce script dans le <body>
const overlay = document.querySelector('.modal-overlay');
document.querySelector('.open-modal').addEventListener('click', function() {
overlay.style.display = 'flex';
document.body.style.overflow = 'hidden';
});
document.querySelector('.close-modal').addEventListener('click', function() {
overlay.style.display = 'none';
document.body.style.overflow = '';
});
overlay.addEventListener('click', function(e) {
if (e.target === overlay) {
overlay.style.display = 'none';
document.body.style.overflow = '';
}
});Conclusion
Une modal native améliore les conversions et l'UX sans alourdir votre site. Cas d'usage :
- Formulaire de contact ou de démo
- Confirmation d'action (suppression, achat)
- Galerie d'images lightbox
bon à savoir
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
