27/Overlays

Modal

Diálogo centrado con foco atrapado, cierre con Esc, clic en el fondo y botones data-cb-close.

Confirmación

HTML

<button class="cb-btn cb-btn--primary" type="button" data-cb-open="demo-modal">Abrir modal</button>

<div class="cb-modal" id="demo-modal" data-cb-modal>
  <div class="cb-modal__panel">
    <div class="cb-modal__head">
      <div>
        <h2 class="cb-modal__title">¿Archivar el proyecto?</h2>
        <p class="cb-modal__desc">Podrás restaurarlo durante 30 días.</p>
      </div>
      <button class="cb-modal__close" type="button" data-cb-close aria-label="Cerrar"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M6 6l12 12M18 6 6 18"/></svg></button>
    </div>
    <div class="cb-modal__body">
      <div class="cb-field">
        <label class="cb-field__label" for="modal-reason">Motivo</label>
        <input class="cb-input" id="modal-reason" placeholder="Opcional">
      </div>
    </div>
    <div class="cb-modal__foot">
      <button class="cb-btn cb-btn--outline" type="button" data-cb-close>Cancelar</button>
      <button class="cb-btn cb-btn--danger" type="button" data-cb-close>Archivar</button>
    </div>
  </div>
</div>

Tamaños y estático

Con data-cb-static el clic en el fondo no lo cierra. cb-modal--center lo centra verticalmente.

HTML

<button class="cb-btn cb-btn--outline" type="button" data-cb-open="demo-modal-lg">Modal grande</button>

<div class="cb-modal cb-modal--lg cb-modal--center" id="demo-modal-lg" data-cb-modal data-cb-static>
  <div class="cb-modal__panel">
    <div class="cb-modal__head">
      <h2 class="cb-modal__title">Términos del servicio</h2>
      <button class="cb-modal__close" type="button" data-cb-close aria-label="Cerrar"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M6 6l12 12M18 6 6 18"/></svg></button>
    </div>
    <div class="cb-modal__body"><p>Este modal solo se cierra con los botones o con Esc.</p></div>
    <div class="cb-modal__foot"><button class="cb-btn cb-btn--primary" type="button" data-cb-close>Aceptar</button></div>
  </div>
</div>

Clases y modificadores

Clase	Descripción
`.cb-modal`	Fondo con desenfoque. `.is-open` lo muestra.
`.cb-modal--sm`, `.cb-modal--lg`	Anchos de 400 y 760px (por defecto 520).
`.cb-modal--center`	Centrado vertical.
`.cb-modal__panel`	Caja del diálogo.
`.cb-modal__head`, `.cb-modal__title`, `.cb-modal__desc`	Cabecera, título y descripción.
`.cb-modal__close`	Botón de cerrar.
`.cb-modal__body`, `.cb-modal__foot`	Contenido y acciones.

Atributos data-cb-*

Atributo	Descripción
`data-cb-modal`	Activa el modal. Necesita `id`.
`data-cb-open="id"`	En cualquier botón, abre ese modal o drawer.
`data-cb-close`	Dentro del modal, lo cierra.
`data-cb-static`	Ignora el clic en el fondo.
`data-cb-open-on-load`	Lo abre al cargar.
`data-cb-role="alertdialog"`	Cambia el rol para confirmaciones críticas.

JavaScript

Evento	Cuándo se dispara
`cb:open`	Antes de abrir. Se puede cancelar con `preventDefault()`.
`cb:close`	Antes de cerrar. También se puede cancelar.

Abrir y cerrar desde JS:

cobalto.modal.open('demo-modal');
cobalto.modal.close('demo-modal');

Desde Livewire 4: despacha el evento con $this->dispatch('abrir-modal', id: 'confirmar') y escúchalo con Livewire.on():

document.addEventListener('livewire:init', () => {
  Livewire.on('abrir-modal', (event) => cobalto.modal.open(event.id));
});

Accesibilidad

El panel recibe role="dialog", aria-modal="true" y aria-labelledby apuntando al título.
El foco entra al primer control (o al que tenga autofocus), queda atrapado y vuelve al botón al cerrar.
Esc cierra solo el overlay de más arriba si hay varios abiertos.
El scroll del body se bloquea mientras está abierto.