# Modal (diálogos focales)

> Documentación de QuicklyCSS V2 2.0.0-alpha.2. Versión preliminar.

- Página canónica: https://quicklycss.cl/docs/component-modal.php
- Catálogo de API: https://quicklycss.cl/quicklycss-api.json
- Índice para IA: https://quicklycss.cl/llms.txt

Componentes · Interacción

Presenta decisiones o información contextual que requiere atención antes de volver al contenido principal.

v2.0

□
## Dialog nativo
Aprovecha foco modal y backdrop del navegador.

×
## Cierre explícito
Incluye controles claros en cabecera y pie.

⌘
## Módulo opcional
El JavaScript conecta activadores y cierres mediante atributos.

i
## Úsalo con moderación
Modal interrumpe el flujo. Resérvalo para decisiones, confirmaciones o tareas breves que necesiten contexto inmediato.

Código + resultado

## Ejemplos aplicados de Modal
Selecciona una composición para revisar únicamente su código y el resultado correspondiente.

HTML

```html
<div class="display-flex flex-center">
  <button class="btn btn-primary" type="button" data-qy-modal-open="component-doc-modal">
    Abrir modal
  </button>
  <dialog class="q-modal rounded-16 shadow-box-xl" id="component-doc-modal" aria-labelledby="component-doc-modal-title">
    <div class="q-modal__header">
      <h2 id="component-doc-modal-title">
        Confirmar acción
      </h2>
      <button class="btn-ico btn-light btn-fs-04 rounded-100" type="button" aria-label="Cerrar" data-qy-modal-close>
        ×
      </button>
    </div>
    <div class="q-modal__body">
      Revisa la información antes de continuar.
    </div>
    <div class="q-modal__footer">
      <button class="btn btn-light btn-fs-04" type="button" data-qy-modal-close>
        Cancelar
      </button>
      <button class="btn btn-primary btn-fs-04" type="button" data-qy-modal-close>
        Entendido
      </button>
    </div>
  </dialog>
</div>
```

Resultado aplicado   Modal · confirmación

Componente real

## Confirmar acción

Revisa la información antes de continuar.

Construido únicamente con clases de QuicklyCSS V2 y HTML semántico.

HTML

```html
<div class="display-flex flex-center">
  <button class="btn btn-primary" type="button" data-qy-modal-open="component-media-modal">
    Ver experiencia
  </button>
  <dialog class="q-modal q-modal--media rounded-16 shadow-box-xl" id="component-media-modal" aria-labelledby="component-media-modal-title">
    <div class="q-modal__layout">
      <img class="q-modal__media" src="../assets/img/filter-showcase.jpg" alt="Jarrón artesanal con flores">
      <div class="q-modal__content">
        <div class="q-modal__header">
          <h2 id="component-media-modal-title">
            Diseño que inspira
          </h2>
          <button class="btn-ico btn-light btn-fs-04 rounded-100" type="button" aria-label="Cerrar" data-qy-modal-close>
            ×
          </button>
        </div>
        <div class="q-modal__body">
          Descubre una composición visual con imagen y contenido distribuidos en formato horizontal.
        </div>
        <div class="q-modal__footer">
          <button class="btn btn-light btn-fs-04" type="button" data-qy-modal-close>
            Ahora no
          </button>
          <button class="btn btn-primary btn-fs-04" type="button" data-qy-modal-close>
            Explorar
          </button>
        </div>
      </div>
    </div>
  </dialog>
</div>
```

Resultado aplicado   Modal · imagen lateral

Componente real
![Jarrón artesanal con flores](../assets/img/filter-showcase.jpg)
## Diseño que inspira

Descubre una composición visual con imagen y contenido distribuidos en formato horizontal.

Construido únicamente con clases de QuicklyCSS V2 y HTML semántico.

Referencia

## Clases disponibles
La anatomía define las piezas estables; las utilidades de Quickly ajustan layout, espacio, tamaño y comportamiento responsive.

| Clase o atributo | Función | Uso recomendado |
| --- | --- | --- |
| .q-modal | Diálogo | Contenedor dialog principal. |
| .q-modal__header | Cabecera | Título y acción de cierre. |
| .q-modal__body | Contenido | Información principal del diálogo. |
| .q-modal__footer | Acciones | Botones de confirmación y cancelación. |
| .q-modal--media | Variante con imagen | Amplía el diálogo para una composición visual horizontal. |
| .q-modal__layout | Distribución | Organiza la imagen lateral y el contenido en columnas adaptables. |
| .q-modal__media | Imagen | Ocupa el lateral completo y conserva su proporción mediante recorte. |
| .q-modal__content | Contenido lateral | Agrupa cabecera, cuerpo y acciones de la variante horizontal. |
| .shadow-box-xl | Sombra opcional | Eleva el diálogo mediante una utilidad independiente. |
| .btn | Botón base | Clase compartida de las acciones. |
| .btn-primary | Acción principal | Confirma la operación. |
| .btn-light | Acción secundaria | Cancela o cierra sin destacar. |
| .btn-ico | Botón de icono | Control circular de cierre. |
| .btn-fs-04 | Escala | Ajusta la escala tipográfica de las acciones. |
| .display-flex | Layout auxiliar | Activa el contenedor flexible del ejemplo. |
| .flex-center | Alineación | Centra el activador dentro del resultado. |
| data-qy-modal-open | Hook JS | Abre el diálogo indicado. |
| data-qy-modal-close | Hook JS | Cierra el diálogo contenedor. |
| .bc-{token} | Color de acento | Sincroniza el título y el control de cierre. |
| .rounded-16 | Radio opcional | Redondea la ventana modal. |
| .rounded-100 | Control circular | Redondea completamente el botón de cierre. |

Recomendaciones

## Buenas prácticas de Modal

01
### Título específico
Explica qué decisión o tarea contiene el diálogo.

02
### Cierre disponible
Ofrece cancelar o cerrar sin completar la acción.

03
### Foco inicial
Coloca el foco en un control seguro y predecible.

04
### Una tarea
No conviertas el modal en una aplicación dentro de otra.