Modals

Modal de base (dialog DaisyUI)

Utiliser l'élément natif <dialog> via DaisyUI. L'ouverture se fait via showModal(). Le clic sur le backdrop ferme automatiquement le modal.

<button class="btn btn-primary btn-sm" onclick="document.getElementById('demo-modal').showModal()">
  Ouvrir le modal
</button>

<dialog id="demo-modal" class="modal">
  <div class="modal-box">
    <h3 class="font-accent font-bold text-lg text-mc-navy">Titre du modal</h3>
    <p class="py-4 text-sm text-base-content/70">Contenu du modal. Confirmez-vous cette action ?</p>
    <div class="modal-action">
      <form method="dialog">
        <button class="btn btn-ghost">Annuler</button>
      </form>
      <button class="btn btn-primary">Confirmer</button>
    </div>
  </div>
  <form method="dialog" class="modal-backdrop"><button>close</button></form>
</dialog>

Modal de confirmation destructive

Obligatoire pour toute action irréversible. Toujours nommer l'objet dans le titre. Le bouton de confirmation porte le label de l'action, jamais "Oui" ou "Confirmer".

<button class="btn btn-error btn-sm" onclick="document.getElementById('demo-modal-delete').showModal()">
  Supprimer
</button>

<dialog id="demo-modal-delete" class="modal">
  <div class="modal-box">
    <h3 class="font-accent font-bold text-lg text-mc-navy">Supprimer CMD-0241 ?</h3>
    <p class="py-4 text-sm text-base-content/70">
      Cette action est irréversible. La commande et tous ses articles seront définitivement supprimés.
    </p>
    <div class="modal-action">
      <form method="dialog">
        <button class="btn btn-ghost">Annuler</button>
      </form>
      <button class="btn btn-error">Supprimer la commande</button>
    </div>
  </div>
  <form method="dialog" class="modal-backdrop"><button>close</button></form>
</dialog>

Modal avec formulaire

Pour les formulaires courts (2 à 4 champs). Au-delà, préférer une page dédiée. Utiliser fieldset.fieldset avec legend.fieldset-legend pour les labels.

<button class="btn btn-primary btn-sm" onclick="document.getElementById('demo-modal-form').showModal()">
  Ajouter un article
</button>

<dialog id="demo-modal-form" class="modal">
  <div class="modal-box">
    <h3 class="font-accent font-bold text-lg text-mc-navy mb-4">Ajouter un article</h3>
    <fieldset class="fieldset mb-3">
      <legend class="fieldset-legend">Référence produit</legend>
      <input type="text" class="input w-full" placeholder="ex. STTU755">
    </fieldset>
    <fieldset class="fieldset mb-3">
      <legend class="fieldset-legend">Quantité</legend>
      <input type="number" class="input w-full" placeholder="0">
    </fieldset>
    <div class="modal-action">
      <form method="dialog">
        <button class="btn btn-ghost">Annuler</button>
      </form>
      <button class="btn btn-primary">Ajouter l'article</button>
    </div>
  </div>
  <form method="dialog" class="modal-backdrop"><button>close</button></form>
</dialog>

Ouverture via JS

Pour ouvrir ou fermer un modal depuis un controller Stimulus, un événement custom, ou un callback asynchrone.

// Ouvrir
document.getElementById('modal-id').showModal();

// Fermer
document.getElementById('modal-id').close();

Règles