Componentes · Interacción

Modal (diálogos focales)

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.

Código + resultado

Ejemplos aplicados de Modal

Selecciona una composición para revisar únicamente su código y el resultado correspondiente.

<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>

Componente real

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

<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>

Componente real

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

Título específico

Explica qué decisión o tarea contiene el diálogo.

Cierre disponible

Ofrece cancelar o cerrar sin completar la acción.

Foco inicial

Coloca el foco en un control seguro y predecible.

Una tarea

No conviertas el modal en una aplicación dentro de otra.