Modal
Diálogo overlay con fondo oscurecido, variantes de tamaño y un botón de cierre opcional.
Demo en vivo
Demo en vivo de modal
Este modal fue abierto por el botón superior. Haz clic en el fondo, en la X o en la acción Cerrar para descartarlo.
Tamaños
size="sm" — max-width 400px
Modal pequeño
Diálogo compacto para confirmaciones y formularios cortos.
size="md" — max-width 560px (default)
Modal mediano
Tamaño de diálogo predeterminado para la mayoría del contenido.
size="lg" — max-width 720px
Modal grande
Diálogo amplio para contenido rico y maquetas multicolumna.
Cerrable vs bloqueado
closable= — sin botón X
Diálogo bloqueado
Úsalo para flujos críticos que deben confirmarse de forma explícita.
closable — con botón X presente
Diálogo cerrable
Comportamiento predeterminado: el botón X descarta el diálogo.
Uso
<Modal open title="Create project" size="md">
<p>Modal body content goes here.</p>
</Modal>
<Modal title="Small confirmation" size="sm" closable={false}>
<p>Compact dialog without a close button.</p>
</Modal>
<Modal title="Wide layout" size="lg">
<p>Large dialog for rich content.</p>
</Modal>Props
| Prop | Tipo | Predeterminado | Descripción |
|---|---|---|---|
open | boolean | false | Cuando es false, el modal se renderiza con el atributo hidden. |
title | string | — | Título del diálogo renderizado en la barra de encabezado. |
size | 'sm' | 'md' | 'lg' | 'md' | Ancho máximo del panel: 400px, 560px o 720px. |
closable | boolean | true | Muestra el botón X de cierre en el encabezado. |
Un pequeño script en línea maneja el botón de cierre y los clics del fondo mediante atributos data-* — no se requiere ningún framework.