Ir al contenido principal
Frutjam logo Frutjam
v2.2.2
Theme

Componente modal

Última actualización:

Modal CSS Tailwind solo para CSS que utiliza el elemento nativo <dialog>. Tamaño responsivo, fondo y trampa de enfoque. Sin JavaScript para uso básico. Accesible a WCAG AA, funciona con Django, HTMX, Laravel, React y cualquier pila.

Los componentes modales muestran información importante o solicitan la acción del usuario en una ventana superpuesta enfocada. Construidos sobre elementos de diálogo HTML semánticos, los modales admiten animaciones, posicionamiento personalizable y superposiciones de fondo. El sistema modal Frutjam es totalmente accesible con navegación por teclado y enfoque de trampa, lo que lo hace ideal para confirmaciones, formularios y diálogos de alerta.

Solo CSS, no se requiere JavaScript. WCAG AA accesible e independiente del marco: funciona con Django, HTMX, Laravel, React y cualquier pila.

Clase Tipo Descripción
modalBaseContenedor de superposición de diálogo de pantalla completa
modal-contentModificadorPanel interior con acolchado y fondo.
modal-backdropModificadorSuperposición de fondo con clic para cerrar
modal-topModificadorAlinea el contenido con la parte superior de la pantalla.
modal-bottomModificadorAlinea el contenido con la parte inferior de la pantalla.
modal-startModificadorAlinea el contenido a la izquierda
modal-endModificadorAlinea el contenido a la derecha
modal-centerModificadorCentrado horizontalmente
modal-middleModificadorCentrado verticalmente
modal-slide-upEstiloAnimación de entrada deslizable.
modal-slide-downEstiloAnimación de entrada deslizable
modal-slide-startEstiloDeslizamiento desde la animación de la izquierda
modal-slide-endEstiloDeslizamiento desde la animación derecha

Uso básico

Agregue una identificación única al elemento HTML <dialog id="myModal">, luego use esa identificación en JavaScript para llamar a myModal.showModal() para abrir el modal y myModal.close() para cerrar el 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>

Cerrar modal al hacer clic afuera

.modal-backdrop proporciona un fondo en el que se puede hacer clic que cierra el modal cuando se hace clic fuera del contenido 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>

Animaciones de diapositivas modales

Deslícese suavemente hacia adentro y hacia afuera desde la parte superior, inferior, inicial (izquierda en LTR, derecha en RTL) o final (derecha en LTR, izquierda en RTL) con las siguientes clases de utilidad direccionales: modal-slide-top, modal-slide-bottom, modal-slide-start y modal-slide-end en el componente modal. Estas animaciones mejoran la experiencia del usuario mediante el uso de transiciones dinámicas basadas en la posición modal.

Deslizamiento modal desde el inicio (horizontal)

Agregue la utilidad modal-slide-start para deslizar el modal horizontalmente desde el lado inicial; en diseños de izquierda a derecha (LTR), aparece desde la izquierda, y en diseños de derecha a izquierda (RTL), desde la derecha.

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>

Deslizamiento modal desde el final (horizontal)

Agregue la utilidad modal-slide-end en el componente modal para deslizar el modal horizontalmente desde el lado final; en diseños de izquierda a derecha (LTR), aparece desde la derecha, y en diseños de derecha a izquierda (RTL), desde la izquierda.

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>

Deslizar desde abajo (vertical): modal-slide-up

Dirección: Se desliza verticalmente desde la parte inferior.

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>

Deslizar desde arriba (vertical)

Agregue la utilidad modal-slide-down en el componente modal para deslizarse verticalmente desde la parte superior.

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>

Ejemplo de uso del modal de animación deslizante para notificación

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>

Colocaciones modales

El componente modal está colocado de forma predeterminada en el centro de la pantalla, pero se puede colocar dependiendo del caso de uso usando clases horizontales modal-start, modal-center o modal-end, y clases verticales modal-top, modal-middle o modal-bottom. La ubicación está diseñada teniendo en cuenta la compatibilidad RTL y LTR, lo que hace que el modal se adapte a diferentes direcciones y diseños de idiomas.

Utilice modal-start, modal-center o modal-end para la ubicación horizontal y modal-top, modal-middle o modal-bottom para la ubicación vertical. Estas clases se aplican al componente modal.

Ubicación modal superior izquierda

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>

Colocación modal en el centro superior

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>

Ubicación modal superior derecha

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>

Colocación modal centro izquierda

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>

Colocación modal centro derecha

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>

Colocación modal inferior izquierda

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>

Colocación modal en el centro inferior

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>

Colocación modal inferior derecha

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>

Posicionamiento responsivo de modal para pantallas de escritorio y móviles.

Dependiendo de su caso de uso, puede colocar el modal en cualquier lugar del escritorio o del dispositivo móvil, por ejemplo, en el centro del escritorio y en el centro superior del dispositivo móvil.

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>

Posicionamiento modal basado en la dirección del lenguaje.

Coloque el modal en cualquier lugar de la pantalla dependiendo de la dirección del idioma (LTR o RTL).

Alineado a la derecha y centrado verticalmente en LTR y RTL

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>

Coloque el modal según el tamaño de la pantalla y la dirección del idioma.

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>

¿Usando Claude Code, Cursor u otro editor de IA?

Cherry MCP le brinda a su editor de IA la estructura y los nombres exactos de las clases Modal según sea necesario. No más clases alucinadas.

Pruebe Cherry MCP