Modales & Boîtes de Dialogue

Permettent d'afficher des boîtes de dialogue centrées avec arrière-plan flouté pour la saisie de formulaires, la confirmation d'actions ou les alertes.

Démonstration interactive

Cliquez sur les boutons ci-dessous pour ouvrir les exemples de fenêtres modales :

    
HTML

<!-- Structure HTML d'une modale DSML -->
<div class="ml-modal-overlay hidden" id="ma-modale" role="dialog" aria-modal="true">
  <div class="ml-modal-content">
    <div class="ml-modal-header">
      <h3 class="ml-modal-heading">
        <i class="ml-icon-edit-line ml-icon--xs"></i>
        <span>Titre de la modale</span>
      </h3>
      <button type="button" class="ml-modal-close-btn" aria-label="Fermer">&times;</button>
    </div>
    <div class="ml-modal-body">
      <p class="ml-modal-desc">Description ou sous-titre de la modale.</p>
      <!-- Contenu ou formulaire -->
    </div>
    <div class="ml-modal-footer">
      <button type="button" class="ml-btn ml-btn--secondary ml-btn--sm">Annuler</button>
      <button type="button" class="ml-btn ml-btn--primary ml-btn--sm">Valider</button>
    </div>
  </div>
</div>

Script d'ouverture et fermeture

JS

// Pour ouvrir la modale
document.getElementById('mon-bouton-ouvrir').addEventListener('click', () => {
  document.getElementById('ma-modale').classList.remove('hidden');
});

// Pour fermer la modale
document.querySelectorAll('.fermer-modale').forEach(btn => {
  btn.addEventListener('click', () => {
    document.getElementById('ma-modale').classList.add('hidden');
  });
});