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
-
NameTypeDefaultDescription
-
overlaySelectorCSS selector"#overlay"
-
focusOnFirstFocusableBooleantrue