Comment créer un modal natif dans Webflow sans plugin ?

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

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