Generador de Modal CSS

Qué cubre el CSS generado

El código da estilo a cinco clases:

• .modal-backdrop: capa fija a pantalla completa con fondo oscuro semitransparente (rgba(17, 24, 39, .62)), rejilla centrada y 24 px de margen alrededor del panel.
• .modal-panel: tarjeta blanca con ancho min(100%, Npx), tu radio de esquinas, sombra suave y esquinas recortadas.
• .modal-header: barra de acento de 4 px en tu color y, debajo, el área del título con un relleno de 20 px 24 px.
• .modal-body: el área de contenido, con 18 px 24 px de relleno.
• .modal-actions: una fila de botones alineada a la derecha, con un espacio de 10 px entre ellos.

Estructura HTML correspondiente

El CSS espera este marcado:

<div class="modal-backdrop">
  <div class="modal-panel">
    <div class="modal-header">
      <h2>Confirmar</h2>
    </div>
    <div class="modal-body">
      <p>¿Seguro que quieres continuar?</p>
    </div>
    <div class="modal-actions">
      <button>Cancelar</button>
      <button>Continuar</button>
    </div>
  </div>
</div>

Mantén el panel dentro del fondo: el fondo es la capa fija y el panel se centra dentro de él. Para abrir y cerrar el modal, inserta y retira el fondo desde el código de tu aplicación, o alterna su visibilidad.

Adaptación a pantallas pequeñas

El ancho del panel se limita con min(100%, Npx), así que un ajuste de 520 px ocupa todo el ancho de la ventana en un móvil estrecho, menos los 24 px de margen del fondo. La fila de acciones sigue alineada a la derecha y el contenido largo se desplaza con la página. No hacen falta media queries para los casos habituales.

Notas y límites

El generador produce solo CSS. No incluye JavaScript para abrir o cerrar el modal, bloquear el foco del teclado ni gestionar la tecla ESC. Añade esa lógica en tu aplicación.

La cabecera mantiene su barra de acento de 4 px en todo momento; si no la necesitas, elimina o recolorea la regla en el código copiado.