Modales
Fenêtre superposée pour la connexion, le feedback ou toute
action nécessitant de bloquer le reste de l'interface.
L'ouverture/fermeture est gérée par ui.js via
les attributs data-lumy-modal-open et
data-lumy-modal-close.
Modale de connexion
<!-- Bouton d'ouverture -->
<button class="lumy-btn lumy-btn--blue"
data-lumy-modal-open="login-modal">
Connexion
</button>
<!-- Structure de la modale -->
<div class="lumy-modal" id="login-modal"
role="dialog" aria-modal="true" aria-labelledby="login-title">
<div class="lumy-modal__dialog">
<header class="lumy-modal__header">
<div>
<h2 id="login-title">Connexion</h2>
<p class="lumy-text-muted">Compte Lumy unique</p>
</div>
<button class="lumy-btn lumy-btn--ghost lumy-btn--square"
data-lumy-modal-close aria-label="Fermer">
×
</button>
</header>
<div class="lumy-modal__body">
<div class="lumy-field">
<label class="lumy-label" for="login-email">
Adresse e-mail
</label>
<input class="lumy-input" id="login-email" type="email">
</div>
</div>
<footer class="lumy-modal__footer">
<button class="lumy-btn" data-lumy-modal-close>
Annuler
</button>
<button class="lumy-btn lumy-btn--primary">
Se connecter
</button>
</footer>
</div>
</div>
HTML
Anatomie
.lumy-modal— le calque plein écran avec fond assombri..lumy-modal__dialog— la boîte blanche centrée..lumy-modal__header,__body,__footer— les trois zones internes.
API JavaScript
En complément des attributs data-*, tu peux
piloter une modale depuis ton propre script :
LumyUI.modal.open("login-modal");
LumyUI.modal.close("login-modal");
JS
Accessibilité
- Utilise
role="dialog",aria-modal="true"etaria-labelledbypointant vers le titre. - La touche Échap ferme automatiquement la modale (géré par
ui.js). - Le focus se déplace vers le premier élément interactif à l'ouverture.
- Un clic sur le fond assombri (en dehors de
.lumy-modal__dialog) ferme la modale.