Modal Slide
Panneau modal qui glisse depuis le bas de l'écran en 0,4 s — overlay semi-transparent à backdrop-filter: blur, transition cubic-bezier, zéro dépendance.
Vous aurez accès à la démo interactive avec un compte gratuit.
Cet effet fait partie d'Effect.Labs — 811 effets vanilla, une partie gratuite, une partie premium. Navigation comprend 36 effets, dont 4 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
Le déclencheur est un <button class="modal-trigger"> qui appelle openModal() via onclick. La fonction ajoute la classe .active sur deux éléments statiques du DOM : #modalOverlay (l'overlay plein écran) et #modal (le panneau glissant), puis bloque le défilement de la page avec document.body.style.overflow = 'hidden'.
#modalOverlay est un <div> en position: fixed couvrant tout le viewport. Par défaut il est invisible (opacity: 0; visibility: hidden). La classe .active le rend visible via une transition CSS de 0,3 s en ease. backdrop-filter: blur(4px) applique un flou gaussien sur tout le contenu derrière l'overlay, sans modifier les éléments sous-jacents — c'est un filtre GPU sur la couche compositing.
#modal est positionné en bas de l'écran (position: fixed; bottom: 0), centré avec left: 50%; transform: translateX(-50%). Un second translateY(100%) le cache sous le bord inférieur du viewport au repos. La classe .active le fait passer à translateY(0) — le panneau remonte sur 0,4 s avec la courbe cubic-bezier(0.4, 0, 0.2, 1), rapide au départ et lente en fin, imitant la physique d'un tiroir mécanique.
La poignée .modal-handle (40 × 4 px, semi-transparente) est purement décorative — aucun comportement de swipe natif n'est inclus. La fonction closeModal() n'est pas définie dans le code fourni : c'est au développeur de l'implémenter (retirer .active sur les deux éléments, restituer body.overflow = '').
Accessibilité
- prefers-reduced-motion : absent du code — la transition de glissement se déclenche quelle que soit la préférence OS. À ajouter manuellement :
@media (prefers-reduced-motion: reduce) { .modal, .modal-overlay { transition: none; } }. - Le panneau
#modaln'a nirole="dialog", niaria-modal="true", niaria-labelledby— les lecteurs d'écran n'annoncent pas l'ouverture d'une boîte de dialogue. - Aucune gestion du focus : le focus clavier n'est ni déplacé dans le modal à l'ouverture, ni renvoyé au bouton déclencheur à la fermeture. À implémenter avec
panel.querySelector('[autofocus], button, input').focus()dansopenModal(). - Pas de listener sur la touche
Escapepour fermer le modal — navigation clavier seule incomplète. - Le bouton déclencheur est un
<button>natif : focusable et activable au clavier par défaut, sans modification nécessaire.
Compatibilité navigateur
Nécessite position: fixed, backdrop-filter, transform, CSS transitions et l'API classList — disponibles dans tous les navigateurs modernes.
Sans support <code>backdrop-filter</code> (Firefox < 103) : l'overlay s'affiche en fond uni <code>rgba(0,0,0,0.7)</code> sans flou — l'animation de glissement du panneau reste intacte.
Le code
Structure HTML à coller dans votre page (CSS + JS disponibles avec un compte premium) :
<button class="modal-trigger" onclick="openModal()">
Ouvrir Modal
</button>
<!-- Overlay flouté (plein écran, fixe) -->
<div class="modal-overlay" id="modalOverlay"></div>
<!-- Panneau modal (glisse depuis le bas) -->
<div class="modal" id="modal">
<div class="modal-handle"></div>
<h3 class="modal-title">Titre du modal</h3>
<p class="modal-content">Contenu personnalisable.</p>
<button class="modal-close" onclick="closeModal()">Fermer</button>
</div>HTML + CSS + JS complet, prêt à coller — avec des centaines d'effets premium.
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
| transition du .modal | 0.4s cubic-bezier(0.4, 0, 0.2, 1) | Durée et courbe de glissement. Exemples : 0,25 s pour une réponse vive ; cubic-bezier(0.34, 1.56, 0.64, 1) pour un ressort avec overshoot. |
| backdrop-filter du .modal-overlay | blur(4px) | Intensité du flou gaussien sur le fond. 8–12 px pour un effet prononcé ; supprimer la propriété pour un overlay plat sans flou. |
| background du .modal-overlay | rgba(0, 0, 0, 0.7) | Couleur et opacité de l'overlay. Réduire à 0,4–0,5 pour un voile léger ; monter à 0,85 pour isoler le panneau du contexte. |
| border-radius du .modal | 20px 20px 0 0 | Arrondi des coins supérieurs du panneau. 28 px pour un look iOS prononcé ; 0 pour un panneau pleine largeur sans arrondis. |
| max-width du .modal | 500px | Largeur maximale du panneau. 100 % pour pleine largeur desktop ; 640 px pour un formulaire plus spacieux. |
| background du .modal | linear-gradient(180deg, #1a1a2e 0%, #16162a 100%) | Fond du panneau. Remplacer par une couleur brand plate ou un dégradé avec votre palette. |
| closeModal() | non fourni | Fermeture à implémenter par le développeur : retirer .active sur #modalOverlay et #modal, puis document.body.style.overflow = ''. |
FAQ
openModal(). Implémentation minimale : function closeModal() { document.getElementById('modalOverlay').classList.remove('active'); document.getElementById('modal').classList.remove('active'); document.body.style.overflow = ''; }. Pour fermer aussi en cliquant sur l'overlay, ajouter : document.getElementById('modalOverlay').addEventListener('click', closeModal).function openModal(ovId, panId) { var ov = document.getElementById(ovId || 'modalOverlay'); var p = document.getElementById(panId || 'modal'); if (ov && p) { ov.classList.add('active'); p.classList.add('active'); } }. Chaque paire overlay/panneau reçoit ses propres IDs.transform: translateY(), une propriété accélérée par GPU sur tous les navigateurs mobiles modernes. Le swipe-to-close n'est pas inclus ; il s'ajoute avec un listener touchstart/touchmove/touchend sur le panneau, en déclenchant closeModal() si le delta Y dépasse ~80 px vers le bas.
