Skip to main content

Modal

Plusieurs modal dans une même page possible. Seulement vous assurez que le ID de votre modal et l'attribut data-target de votre bouton soient unique.

Demo

Cliquez sur le bouton suivant pour ouvrir le modal.

Installation

Par défaut, lors de l'ouverture, le premier élément focusable a le focus. Cela est utile pour un <form> dans un modal ou le premier champ serait déjà focus. L'option focusOnFirstFocusable permet de désactiver ce comportement.

Le focus est trapped dans le modal permettant une navigation avec tab vers l'avant ou avec tab + shift vers l'arrière.

Importez dans votre projet

import { Modal } from "@overdog/fn"

Créez et initialisez une instance

new Modal("#my-modal-button", {
  // options goes here
}).init()

Ajoutez les variants Tailwind dans la section plugins de votre fichier de config

Note : si vous utilisez plusieurs éléments de Overdog FN qui nécessitent les mêmes variants, vous les ajoutez seulement une fois.

module.exports = {
   // ...
   plugins: [
      plugin(function ({ addVariant }) {
         addVariant("is-open", "&[data-fn-is-open]")
         addVariant("parent-is-open", "[data-fn-is-open] &")
      })
   ]
}

Twig template Code


{# place your overlay anywhere before the closing body tag #}
<div 
   id="overlay" 
   data-fn-overlay 
   class="fixed z-50 inset-0 hidden bg-slate-900/50 opacity-0 transition-opacity is-open:opacity-100">
</div>

{# open button #}
<button 
   data-fn-modal-button
   data-fn-target="modal-1"
   id="my-modal-button" {# selector for your JS instance - you can use a CSS class too #}
   class="bg-slate-800 px-8 py-4 inline-block text-white is-open:bg-slate-900"
   aria-haspopup="dialog" 
   aria-expanded="false">
   Open modal #1
</button>

{# modal #}
<div 
   class="fixed z-[1000] inset-1/2 hidden w-[600px] max-w-[80%] h-[400px] p-8 
          bg-white transform -translate-x-1/2 -translate-y-1/2 drop-shadow-md
          is-open:block"
   data-fn-modal-box
   id="modal-1"
   role="dialog" 
   aria-label="Modal 1" 
   aria-modal="true"
>
   {# close button #}
   <button data-fn-modal-close class="w-12 h-12 bg-gray-300 rounded-full mb-quarter">x</button>
  {# content #}
  <p>Press escape, click on the body overlay or on the close button to get rid of me!</p>
</div>

Options