Passer au contenu principal
Frutjam logo Frutjam
v2.2.2
Theme

Modal Component

CSS-only Tailwind CSS modal using native <dialog>. Responsive sizing, backdrop, and focus trap. No JavaScript for basic usage. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.

Les composants modaux affichent des informations importantes ou demandent une action de l'utilisateur dans une fenêtre superposée ciblée. Construits sur des éléments de dialogue HTML sémantiques, les modaux prennent en charge les animations, le positionnement personnalisable et les superpositions d'arrière-plan. Le système modal Frutjam est entièrement accessible avec une navigation au clavier et un focus sur les pièges, ce qui le rend idéal pour les confirmations, les formulaires et les boîtes de dialogue d'alerte.

CSS uniquement, aucun JavaScript requis. WCAG AA accessible et indépendant du framework – fonctionne avec Django, HTMX, Laravel, React et n'importe quelle pile.

Classe Taper Description
modalBaseConteneur de superposition de dialogue plein écran
modal-contentModificateurPanneau intérieur avec rembourrage et fond
modal-backdropModificateurSuperposition de fond en cliquant pour fermer
modal-topModificateurAligne le contenu en haut de l'écran
modal-bottomModificateurAligne le contenu en bas de l'écran
modal-startModificateurAligne le contenu à gauche
modal-endModificateurAligne le contenu à droite
modal-centerModificateurCentré horizontalement
modal-middleModificateurCentré verticalement
modal-slide-upStyleAnimation d'entrée coulissante
modal-slide-downStyleAnimation d'entrée coulissante
modal-slide-startStyleSlide-in depuis l'animation de gauche
modal-slide-endStyleSlide-in à partir de l'animation de droite

Utilisation de base

Ajoutez un identifiant unique à l'élément HTML <dialog id="myModal">, puis utilisez cet identifiant en JavaScript pour appeler myModal.showModal() pour ouvrir le modal et myModal.close() pour fermer le modal.

Dialog modal

Press Esc key or close button to close the modal

 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
<dialog class="modal modal-center lg:modal-middle modal-slide-end lg:modal-slide-down" id="toggleModal">
  <div class="modal-content">
    <div class="flex justify-between items-center gap-3">
      <div class="font-medium heading-lg">Dialog modal</div>
      <button type="button" class="btn btn-xs btn-square btn-rounded btn-ghost" onclick="toggleModal.close()">
        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <path d="M18 6 6 18"></path>
          <path d="m6 6 12 12"></path>
        </svg>
      </button>
    </div>
    <div class="divider my-3"></div>
    <p class="para">Press Esc key or close button to close the modal</p>
  </div>
  <button type="button" class="modal-backdrop" onclick="toggleModal.close()">Close Modal via Backdrop</button>
</dialog>
<button type="button" class="btn btn-xs" onclick="toggleModal.showModal()">Show Modal</button>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
import { useModal } from 'frutjam/react'

export default function ModalDemo() {
  const modal = useModal()
  return (
    <>
      <button type="button" className="btn btn-xs" onClick={modal.open}>Show Modal</button>
      <dialog ref={modal.ref} className="modal modal-center lg:modal-middle modal-slide-end lg:modal-slide-down">
        <div className="modal-content">
          <div className="flex justify-between items-center gap-3">
            <div className="font-medium heading-lg">Dialog modal</div>
            <button type="button" className="btn btn-xs btn-square btn-rounded btn-ghost" onClick={modal.close}>
              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <path d="M18 6 6 18"></path>
                <path d="m6 6 12 12"></path>
              </svg>
            </button>
          </div>
          <div className="divider my-3"></div>
          <p className="para">Press Esc key or close button to close the modal</p>
        </div>
        <button type="button" className="modal-backdrop" onClick={modal.close}>Close Modal via Backdrop</button>
      </dialog>
    </>
  )
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<script setup>
import { ref } from 'vue'
const dialogRef = ref(null)
</script>

<template>
  <button type="button" class="btn btn-xs" @click="dialogRef.showModal()">Show Modal</button>
  <dialog ref="dialogRef" class="modal modal-center lg:modal-middle modal-slide-end lg:modal-slide-down">
    <div class="modal-content">
      <div class="flex justify-between items-center gap-3">
        <div class="font-medium heading-lg">Dialog modal</div>
        <button type="button" class="btn btn-xs btn-square btn-rounded btn-ghost" @click="dialogRef.close()">
          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="M18 6 6 18"></path>
            <path d="m6 6 12 12"></path>
          </svg>
        </button>
      </div>
      <div class="divider my-3"></div>
      <p class="para">Press Esc key or close button to close the modal</p>
    </div>
    <button type="button" class="modal-backdrop" @click="dialogRef.close()">Close Modal via Backdrop</button>
  </dialog>
</template>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
<script>
  let dialog = $state(null)
</script>

<button type="button" class="btn btn-xs" onclick={() => dialog.showModal()}>Show Modal</button>
<dialog bind:this={dialog} class="modal modal-center lg:modal-middle modal-slide-end lg:modal-slide-down">
  <div class="modal-content">
    <div class="flex justify-between items-center gap-3">
      <div class="font-medium heading-lg">Dialog modal</div>
      <button type="button" class="btn btn-xs btn-square btn-rounded btn-ghost" onclick={() => dialog.close()}>
        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <path d="M18 6 6 18"></path>
          <path d="m6 6 12 12"></path>
        </svg>
      </button>
    </div>
    <div class="divider my-3"></div>
    <p class="para">Press Esc key or close button to close the modal</p>
  </div>
  <button type="button" class="modal-backdrop" onclick={() => dialog.close()}>Close Modal via Backdrop</button>
</dialog>

Fermez le modal lorsque vous cliquez à l'extérieur

Le .modal-backdrop fournit un arrière-plan cliquable qui ferme le modal lorsque vous cliquez en dehors du contenu modal.

Dialog modal

Press Esc key or click outside to close the modal
html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<dialog class="modal" id="backdropModal">
  <div class="modal-content">
    <div class="flex justify-between items-center gap-3">
      <div class="font-medium heading-lg">Dialog modal</div>
    </div>
    <div class="divider my-3"></div>
    <p class="para">Press Esc key or click outside to close the modal</p>
  </div>
  <button type="button" class="modal-backdrop" onclick="backdropModal.close()">
    Close Modal via Backdrop
  </button>
</dialog>
<button type="button" class="btn btn-xs" onclick="backdropModal.showModal()">Show Modal</button>

Animations de diapositives modales

Glissez doucement vers l'intérieur et vers l'extérieur depuis le haut, le bas, le début (gauche dans LTR, la droite dans RTL) ou la fin (droite dans LTR, gauche dans RTL) avec les classes utilitaires directionnelles suivantes : modal-slide-top, modal-slide-bottom, modal-slide-start et modal-slide-end dans le composant modal. Ces animations améliorent l'expérience utilisateur grâce à l'utilisation de transitions dynamiques basées sur la position modale.

Diapositive modale depuis le début (horizontale)

Ajoutez l'utilitaire modal-slide-start pour faire glisser le modal horizontalement depuis le côté de départ ; dans les mises en page de gauche à droite (LTR), il apparaît depuis la gauche, et dans les mises en page de droite à gauche (RTL), depuis la droite.

Slide start modal

Horizontally slides the modal in and out from the start side.
html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
<dialog class="modal modal-center lg:modal-middle modal-slide-start" id="slideStartModal">
  <div class="modal-content">
    <div class="flex justify-between items-center gap-3">
      <div class="font-medium heading-lg">Slide start modal</div>
      <button type="button" class="btn btn-xs btn-square btn-rounded btn-ghost" onclick="slideStartModal.close()">
        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <path d="M18 6 6 18"></path>
          <path d="m6 6 12 12"></path>
        </svg>
      </button>
    </div>
    <div class="divider my-3"></div>
    <p class="para">Horizontally slides the modal in and out from the start side.</p>
  </div>
</dialog>
<button type="button" class="btn btn-xs" onclick="slideStartModal.showModal()">Show Modal</button>

Glissement modal depuis la fin (horizontal)

Ajoutez l'utilitaire modal-slide-end dans le composant modal pour faire glisser le modal horizontalement depuis l'extrémité ; dans les mises en page de gauche à droite (LTR), il apparaît depuis la droite, et dans les mises en page de droite à gauche (RTL), depuis la gauche.

Slide end modal

Horizontally slides the modal in and out from the end side.
html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
<dialog class="modal modal-center lg:modal-middle modal-slide-end" id="slideEndModal">
  <div class="modal-content">
    <div class="flex justify-between items-center gap-3">
      <div class="font-medium heading-lg">Slide end modal</div>
      <button type="button" class="btn btn-xs btn-square btn-rounded btn-ghost" onclick="slideEndModal.close()">
        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <path d="M18 6 6 18"></path>
          <path d="m6 6 12 12"></path>
        </svg>
      </button>
    </div>
    <div class="divider my-3"></div>
    <p class="para">Horizontally slides the modal in and out from the end side.</p>
  </div>
</dialog>
<button type="button" class="btn btn-xs" onclick="slideEndModal.showModal()">Show Modal</button>

Glisser depuis le bas (vertical) : modal-slide-up

Direction : glisse verticalement à partir du bas

Slide up modal

Vertically slides the modal in and out from the bottom.
html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
<dialog class="modal modal-center lg:modal-middle modal-slide-up" id="slideUpModal">
  <div class="modal-content">
    <div class="flex justify-between items-center gap-3">
      <div class="font-medium heading-lg">Slide up modal</div>
      <button type="button" class="btn btn-xs btn-square btn-rounded btn-ghost" onclick="slideUpModal.close()">
        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <path d="M18 6 6 18"></path>
          <path d="m6 6 12 12"></path>
        </svg>
      </button>
    </div>
    <div class="divider my-3"></div>
    <p class="para">Vertically slides the modal in and out from the bottom.</p>
  </div>
</dialog>
<button type="button" class="btn btn-xs" onclick="slideUpModal.showModal()">Show Modal</button>

Glisser depuis le haut (vertical)

Ajoutez l'utilitaire modal-slide-down dans le composant modal pour glisser verticalement depuis le haut.

Slide down modal

Vertically slides the modal in and out from the top.
html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
<dialog class="modal modal-center lg:modal-middle modal-slide-down" id="slideDownModal">
  <div class="modal-content">
    <div class="flex justify-between items-center gap-3">
      <div class="font-medium heading-lg">Slide down modal</div>
      <button type="button" class="btn btn-xs btn-square btn-rounded btn-ghost" onclick="slideDownModal.close()">
        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <path d="M18 6 6 18"></path>
          <path d="m6 6 12 12"></path>
        </svg>
      </button>
    </div>
    <div class="divider my-3"></div>
    <p class="para">Vertically slides the modal in and out from the top.</p>
  </div>
</dialog>
<button type="button" class="btn btn-xs" onclick="slideDownModal.showModal()">Show Modal</button>

Exemple d'utilisation du modal d'animation coulissante pour la notification

Notification modal
html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
<dialog class="modal modal-end modal-top modal-slide-end" id="notificationSlideModal">
  <div class="modal-content">
    <div class="flex justify-between items-center gap-3">
      <div class="font-medium heading-lg">Notification modal</div>
      <button type="button" class="btn btn-xs btn-square btn-rounded btn-ghost" onclick="notificationSlideModal.close()">
        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <path d="M18 6 6 18"></path>
          <path d="m6 6 12 12"></path>
        </svg>
      </button>
    </div>
  </div>
</dialog>
<button type="button" class="btn btn-xs" onclick="notificationSlideModal.showModal()">Show Modal</button>

Placements modaux

Le composant modal est positionné par défaut au centre de l'écran, mais il peut être placé en fonction du cas d'utilisation en utilisant des classes horizontales modal-start, modal-center ou modal-end, et des classes verticales modal-top, modal-middle ou modal-bottom. Le placement est conçu en tenant compte de la compatibilité RTL et LTR, ce qui rend le modal adaptable à différentes directions et mises en page linguistiques.

Utilisez modal-start, modal-center ou modal-end pour le placement horizontal et modal-top, modal-middle ou modal-bottom pour le placement vertical. Ces classes sont appliquées au composant modal.

Placement modal en haut à gauche

Modal placement top left

Modal placed at the top left corner of the screen
html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
<dialog class="modal modal-start modal-top" id="topLeftModal">
  <div class="modal-content">
    <div class="flex justify-between items-center gap-3">
      <div class="font-medium heading-lg">Modal placement top left</div>
      <button type="button" class="btn btn-xs btn-square btn-rounded btn-ghost" onclick="topLeftModal.close()">
        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <path d="M18 6 6 18"></path>
          <path d="m6 6 12 12"></path>
        </svg>
      </button>
    </div>
    <div class="divider my-3"></div>
    <p class="para">Modal placed at the top left corner of the screen</p>
  </div>
  <button type="button" class="modal-backdrop" onclick="topLeftModal.close()">
    Close Modal via Backdrop
  </button>
</dialog>
<button type="button" class="btn btn-xs" onclick="topLeftModal.showModal()">Show Modal</button>

Placement modal en haut au centre

Modal placement top center

Modal placed at the top center corner of the screen
html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
<dialog class="modal modal-center modal-top" id="topCenterModal">
  <div class="modal-content">
    <div class="flex justify-between items-center gap-3">
      <div class="font-medium heading-lg">Modal placement top center</div>
      <button type="button" class="btn btn-xs btn-square btn-rounded btn-ghost" onclick="topCenterModal.close()">
        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <path d="M18 6 6 18"></path>
          <path d="m6 6 12 12"></path>
        </svg>
      </button>
    </div>
    <div class="divider my-3"></div>
    <p class="para">Modal placed at the top center corner of the screen</p>
  </div>
  <button type="button" class="modal-backdrop" onclick="topCenterModal.close()">
    Close Modal via Backdrop
  </button>
</dialog>
<button type="button" class="btn btn-xs" onclick="topCenterModal.showModal()">Show Modal</button>

Placement modal en haut à droite

Modal placement top end

Modal placed at the top end corner of the screen
html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
<dialog class="modal modal-end modal-top" id="topEndModal">
  <div class="modal-content">
    <div class="flex justify-between items-center gap-3">
      <div class="font-medium heading-lg">Modal placement top end</div>
      <button type="button" class="btn btn-xs btn-square btn-rounded btn-ghost" onclick="topEndModal.close()">
        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <path d="M18 6 6 18"></path>
          <path d="m6 6 12 12"></path>
        </svg>
      </button>
    </div>
    <div class="divider my-3"></div>
    <p class="para">Modal placed at the top end corner of the screen</p>
  </div>
  <button type="button" class="modal-backdrop" onclick="topEndModal.close()">
    Close Modal via Backdrop
  </button>
</dialog>
<button type="button" class="btn btn-xs" onclick="topEndModal.showModal()">Show Modal</button>

Placement modal au centre gauche

Modal placement left center

Modal placed at the start center corner of the screen
html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
<dialog class="modal modal-start modal-middle" id="startCenterModal">
  <div class="modal-content">
    <div class="flex justify-between items-center gap-3">
      <div class="font-medium heading-lg">Modal placement left center</div>
      <button type="button" class="btn btn-xs btn-square btn-rounded btn-ghost" onclick="startCenterModal.close()">
        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <path d="M18 6 6 18"></path>
          <path d="m6 6 12 12"></path>
        </svg>
      </button>
    </div>
    <div class="divider my-3"></div>
    <p class="para">Modal placed at the start center corner of the screen</p>
  </div>
  <button type="button" class="modal-backdrop" onclick="startCenterModal.close()">
    Close Modal via Backdrop
  </button>
</dialog>
<button type="button" class="btn btn-xs" onclick="startCenterModal.showModal()">Show Modal</button>

Placement modal au centre droit

Modal placement right center

Modal placed at the end center corner of the screen
html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
<dialog class="modal modal-end modal-middle" id="endCenterModal">
  <div class="modal-content">
    <div class="flex justify-between items-center gap-3">
      <div class="font-medium heading-lg">Modal placement right center</div>
      <button type="button" class="btn btn-xs btn-square btn-rounded btn-ghost" onclick="endCenterModal.close()">
        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <path d="M18 6 6 18"></path>
          <path d="m6 6 12 12"></path>
        </svg>
      </button>
    </div>
    <div class="divider my-3"></div>
    <p class="para">Modal placed at the end center corner of the screen</p>
  </div>
  <button type="button" class="modal-backdrop" onclick="endCenterModal.close()">
    Close Modal via Backdrop
  </button>
</dialog>
<button type="button" class="btn btn-xs" onclick="endCenterModal.showModal()">Show Modal</button>

Placement modal en bas à gauche

Modal placement bottom start

Modal placed at the bottom start corner of the screen
html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
<dialog class="modal modal-start modal-bottom" id="bottomStartModal">
  <div class="modal-content">
    <div class="flex justify-between items-center gap-3">
      <div class="font-medium heading-lg">Modal placement bottom start</div>
      <button type="button" class="btn btn-xs btn-square btn-rounded btn-ghost" onclick="bottomStartModal.close()">
        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <path d="M18 6 6 18"></path>
          <path d="m6 6 12 12"></path>
        </svg>
      </button>
    </div>
    <div class="divider my-3"></div>
    <p class="para">Modal placed at the bottom start corner of the screen</p>
  </div>
  <button type="button" class="modal-backdrop" onclick="bottomStartModal.close()">
    Close Modal via Backdrop
  </button>
</dialog>
<button type="button" class="btn btn-xs" onclick="bottomStartModal.showModal()">Show Modal</button>

Placement modal en bas au centre

Modal placement bottom center

Modal placed at the bottom center corner of the screen
html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
<dialog class="modal modal-center modal-bottom" id="bottomCenterModal">
  <div class="modal-content">
    <div class="flex justify-between items-center gap-3">
      <div class="font-medium heading-lg">Modal placement bottom center</div>
      <button type="button" class="btn btn-xs btn-square btn-rounded btn-ghost" onclick="bottomCenterModal.close()">
        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <path d="M18 6 6 18"></path>
          <path d="m6 6 12 12"></path>
        </svg>
      </button>
    </div>
    <div class="divider my-3"></div>
    <p class="para">Modal placed at the bottom center corner of the screen</p>
  </div>
  <button type="button" class="modal-backdrop" onclick="bottomCenterModal.close()">
    Close Modal via Backdrop
  </button>
</dialog>
<button type="button" class="btn btn-xs" onclick="bottomCenterModal.showModal()">Show Modal</button>

Placement modal en bas à droite

Modal placement bottom center

Modal placed at the bottom center corner of the screen
html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
<dialog class="modal modal-end modal-bottom" id="bottomEndModal">
  <div class="modal-content">
    <div class="flex justify-between items-center gap-3">
      <div class="font-medium heading-lg">Modal placement bottom center</div>
      <button type="button" class="btn btn-xs btn-square btn-rounded btn-ghost" onclick="bottomEndModal.close()">
        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <path d="M18 6 6 18"></path>
          <path d="m6 6 12 12"></path>
        </svg>
      </button>
    </div>
    <div class="divider my-3"></div>
    <p class="para">Modal placed at the bottom center corner of the screen</p>
  </div>
  <button type="button" class="modal-backdrop" onclick="bottomEndModal.close()">
    Close Modal via Backdrop
  </button>
</dialog>
<button type="button" class="btn btn-xs" onclick="bottomEndModal.showModal()">Show Modal</button>

Positionnement réactif du modal pour les écrans de bureau et mobiles

En fonction de votre cas d'utilisation, vous pouvez positionner le modal n'importe où sur un ordinateur ou un mobile, par exemple au centre du bureau et au centre supérieur du mobile.

Responsive modal

Resize the modal to a small screen to see the change in modal position.
html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<dialog class="modal modal-center modal-top lg:modal-center lg:modal-middle" id="responsiveModal">
  <div class="modal-content">
    <div class="flex justify-between items-center gap-3">
      <div class="font-medium heading-lg">Responsive modal</div>
    </div>
    <div class="divider my-3"></div>
    <p class="para">Resize the modal to a small screen to see the change in modal position.</p>
  </div>
  <button type="button" class="modal-backdrop" onclick="responsiveModal.close()">
    Close Modal via Backdrop
  </button>
</dialog>
<button type="button" class="btn btn-xs" onclick="responsiveModal.showModal()">Show Modal</button>

Positionnement modal basé sur la direction du langage

Placez le modal n'importe où sur l'écran en fonction du sens de la langue (LTR ou RTL).

Aligné à droite et centré verticalement dans LTR et RTL

Responsive modal

Changing dir="rtl" in the HTML will have no effect on the modal's the position because the layout is controlled by utility classes: modal-end for the LTR variant and modal-start for the RTL variant.

html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
<dialog class="modal ltr:modal-end ltr:modal-middle rtl:modal-start lg:modal-middle" id="ltrModal">
  <div class="modal-content">
    <div class="flex justify-between items-center gap-3">
      <div class="font-medium heading-lg">Responsive modal</div>
    </div>
    <div class="divider my-3"></div>
    <p class="para">
      Changing
      <code>dir="rtl"</code>
      in the HTML will have no effect on the modal's the position because the layout is controlled by utility classes:
      <code>modal-end</code>
      for the LTR variant and
      <code>modal-start</code>
      for the RTL variant.
    </p>
  </div>
  <button type="button" class="modal-backdrop" onclick="ltrModal.close()">
    Close Modal via Backdrop
  </button>
</dialog>
<button type="button" class="btn btn-xs" onclick="ltrModal.showModal()">Show Modal</button>

Placez le modal en fonction de la taille de l'écran et de la direction de la langue

Responsive modal

Change the screen and screen direction to see the change in modal position.
html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<dialog class="modal ltr:modal-center lg:ltr:modal-start ltr:modal-top lg:ltr:modal-middle rtl:modal-center lg:rtl:modal-start rtl:modal-bottom lg:rtl:modal-middle" id="mixedModal">
  <div class="modal-content">
    <div class="flex justify-between items-center gap-3">
      <div class="font-medium heading-lg">Responsive modal</div>
    </div>
    <div class="divider my-3"></div>
    <p class="para">Change the screen and screen direction to see the change in modal position.</p>
  </div>
  <button type="button" class="modal-backdrop" onclick="mixedModal.close()">
    Close Modal via Backdrop
  </button>
</dialog>
<button type="button" class="btn btn-xs" onclick="mixedModal.showModal()">Show Modal</button>