Modales a medida
alert, confirm, prompt y diálogos a medida con iconos animados, hasta tres botones, imágenes, HTML y temporizador.
Librería JavaScript · versión 3.0
Modales, formularios y avisos que da gusto usar.
Diálogos centrados con iconos animados, formularios con validación nativa y asíncrona, asistentes por pasos y avisos que siguen a tus promesas. Todo en una librería: sin dependencias, accesible y en unos 14 KB.
- ≈ 14 KBgzip · JS + CSS
- 0dependencias
- 20tipos de campo
- ES · ENtextos incluidos
app.js
Características
Todo lo que necesita un diálogo, nada que sobre.
Formularios completos
Describe los campos o inyecta tu propio formulario. Recibes los valores como un objeto con sus tipos.
Validación de verdad
Reglas nativas, reglas propias y comprobaciones asíncronas (¿ese usuario existe?), con mensajes en español e inglés.
Asistente por pasos
Flujos de varios pasos con progreso, botón Atrás y valores que se conservan entre pasos.
Pensada para async
onConfirm muestra un botón de carga y los errores aparecen dentro del modal. Los avisos pueden seguir a cualquier promesa.
Accesible
Foco atrapado y devuelto, fondo inerte, Esc, roles ARIA y movimiento reducido.
Ligera y aislada
Unos 14 KB comprimida, sin dependencias, estilos con prefijo ja- y variables CSS para tu marca.
No rompe nada
Tu código de la v2 y el alerta() original de la v1 siguen funcionando igual.
Instalación
En marcha en un minuto.
Versión:
1Instálala con npm
…o cárgala desde el CDN:
La v1 no está en npm ni en el CDN: descarga su .zip desde el historial de versiones. Necesita jQuery 3.4.1 o superior, cargado antes que justAlerts.
2Úsala
Constructor visual
Diséñalo, pruébalo y copia el código.
Cada cambio actualiza el código al momento. Pulsa «Probar» para abrirlo y ver exactamente qué devuelve.
Qué devuelve
—Ejemplos
Casos reales, listos para copiar.
API
Referencia
Modales
modal(opciones)Abre un modal. Devuelve { confirmed, action, value }.alert(texto | opciones)Mensaje centrado con un botón.confirm(texto, opciones?)Sí o no. Devuelve true o false.prompt(texto, valor?, opciones?)Pide un dato. Devuelve el valor o null.form(campos, opciones?)Formulario completo. Devuelve un objeto con los valores o null.steps(pasos, opciones?)Asistente. Devuelve { completed, values, step, action }.
Avisos
success | danger | warning | info(msg, opc?)Atajos. Devuelven { id, element, close(), update() }.toast(opciones)·show(opciones)Cualquier aviso, también de tipo loading.promise(promesa, mensajes, opc?)Aviso de carga que pasa a éxito o error. Devuelve la misma promesa.closeAll(posición?)Cierra todos los avisos, o los de una posición.config(opciones)Opciones por defecto (theme y lang también valen para los modales).
Utilidades
mixin(opciones)Funciones de modal con tus opciones por defecto.current()·isOpen()·closeModal()Controla el modal abierto desde cualquier sitio.serialize(form)Formulario a objeto: grupos en arrays, números como Number, archivos como File.alerta(…)·close_all()API de la v1, sigue disponible con la etiqueta script.
| Opción | Por defecto | Descripción |
|---|---|---|
type | null | Icono animado: success, danger, warning, info o question. |
title · text | "" | Título y texto (se escapan). |
html | null | HTML de confianza o un nodo del DOM en lugar del texto. |
image | null | URL o { src, alt, width, height }. |
icon | true | false oculta el icono. |
confirm · deny · cancel | true · false · false | Botones: true, false, un texto o { text, style, className }. Estilos: primary, secondary, success, danger, ghost. |
reverseButtons | false | Invierte el orden de los botones. |
input | null | Un único campo (tipo u objeto de campo). Su valor es el resultado. |
form | null | Lista de campos, un <form>/<template>, un "#selector" o HTML de confianza. |
validate | null | Valida el conjunto: true, un mensaje o { campo: mensaje }. Puede ser asíncrona. |
onConfirm | null | Función async (valor, modal) con botón de carga. Devuelve un valor para resolver con él, false para seguir abierto, o lanza un error para mostrarlo. |
onDeny · onOpen · onClose | null | Callbacks. onDeny puede devolver false para seguir abierto. |
loadingText | null | Texto del botón mientras onConfirm trabaja. |
timer · progress · pauseOnHover | 0 · true · true | Cierre automático en ms, con barra que se pausa con el ratón. |
close | true | false o { esc, backdrop, button }. |
size · align | "md" · "center" | sm, md, lg, xl o píxeles · center o top. |
focus | null | confirm, cancel, deny o input. Por defecto, el primer campo o el botón de confirmar. |
theme · lang · className | null | light, dark o auto · es, en o auto · clase extra. |
| Propiedad | Descripción |
|---|---|
name | Clave en el objeto de resultado (obligatoria). |
type | text, email, password, number, tel, url, search, date, time, datetime-local, month, week, color, textarea, select, radio, checkboxes, checkbox, range o file. |
label · placeholder · hint | Etiqueta, texto de ejemplo y ayuda. |
value · checked | Valor inicial (array en checkboxes) · estado de la casilla. |
required · min · max · step · minLength · maxLength · pattern | Reglas nativas, con mensajes traducidos. |
options | Para select, radio y checkboxes: ["A", "B"], [{ value, label }] o { valor: etiqueta }. |
validate(valor, valores) | Regla propia: true, o un mensaje. Puede ser asíncrona. |
width: "half" | Dos campos por fila (uno en móvil). |
rows · multiple · accept · preview · unit | Filas del textarea · varios valores · tipos de archivo · vista previa de imágenes · sufijo del rango. |
attrs · className · disabled · readonly | Atributos y estados extra. |
| Opción | Por defecto | Descripción |
|---|---|---|
type | "info" | success, danger, warning, info o loading. |
title · message | "" | Título opcional en negrita y texto (se escapa). |
position | "top-right" | top / bottom + left / center / right. |
duration | 5000 | Milisegundos visible; 0 = fijo. |
action | null | { label, onClick(aviso) }: botón como «Deshacer». |
offset · html | 0 · false | Píxeles extra desde el borde · mensaje como HTML de confianza. |
pauseOnHover · progress | true | Pausa con el ratón o el foco · barra de tiempo restante. |
theme · lang | "light" · "auto" | light, dark o auto · es, en o auto. |
| Método | Descripción |
|---|---|
values() | Valores actuales del modal. |
update(opciones) · replace(opciones) | Cambia parte del contenido · lo sustituye entero. |
loading(on, texto?) | Estado de carga con spinner. |
error(msg) · fieldError(nombre, msg) | Error bajo el formulario o bajo un campo. |
close(resultado?) | Cierra el modal. |
stopTimer() · resumeTimer() · timeLeft() | Controla el temporizador. |
El controlador llega en onOpen, onConfirm, validate y current(). Personaliza el aspecto con variables CSS: --ja-primary, --ja-radius, --ja-font, --ja-success, --ja-danger…
Historial de versiones
Todas las versiones, siempre disponibles.
Elige la que necesites: descárgala, instálala con npm o cárgala desde el CDN con su propio enlace.
| Versión | Publicada | Tamaño (gzip) | Requiere | npm · CDN | |
|---|---|---|---|---|---|
| 3.0.0 última | 14,1 KB | Nada | justalerts@3 | .zip | |
| 2.0.0 | 5,0 KB | Nada | justalerts@2 | .zip | |
| 1.0.0 | 4,1 KB | jQuery ≥ 3.4.1 | Solo descarga | .zip |
-
3.0.0 última
- NuevoModales: alert, confirm, prompt y modal, con iconos animados, hasta tres botones, imagen, HTML y temporizador.
- NuevoFormularios a partir de una lista de campos (20 tipos, vista previa de archivos, campos a media anchura) o desde tu propio form o template.
- NuevoValidación nativa, propia y asíncrona, con mensajes en español e inglés.
- NuevoonConfirm asíncrono con botón de carga; los errores se muestran dentro del modal.
- NuevoAsistente por pasos con progreso, botón Atrás y valores conservados entre pasos.
- NuevoAvisos de promesa (cargando → éxito / error), botones de acción como «Deshacer» y update() en vivo.
- MejoraAccesibilidad: foco atrapado y devuelto, fondo inerte, Esc y clic fuera, roles ARIA y movimiento reducido.
- Mejoramixin(), current(), serialize() y tipos de TypeScript completos.
- CompatibleEl código de la v1 y de la v2 sigue funcionando sin cambios.
-
2.0.0
- NuevoReescrita en JavaScript puro: ya no necesita jQuery.
- NuevoPosiciones centradas, títulos, tema oscuro y automático, y textos en español e inglés.
- NuevoPublicada en npm con tipos de TypeScript.
- MejoraEstilos aislados con el prefijo ja-: ya no altera las clases ni los iconos de tu página.
- MejoraAccesible: los lectores de pantalla anuncian cada alerta y se cierran con el teclado.
- MejoraBarra de progreso que se pausa con el ratón o el foco, e IDs únicos.
- CompatibleEl
alerta()de la v1 sigue funcionando.
-
1.0.0
- NuevoFunción
alerta(tipo, mensaje, x, y, tiempo, distancia). - NuevoCuatro tipos: success, danger, warning e info.
- NuevoCuatro esquinas, con apilado por posición.
- NuevoBotón «Cerrar todas» con contador.
- RequierejQuery 3.4.1 o superior.
- NuevoFunción
Estadísticas
En directo desde npm.
Datos públicos de npm y del CDN jsDelivr, consultados al abrir esta sección. npm actualiza sus cifras con un día de retraso e incluye descargas automáticas (bots, espejos, integración continua).
Descargas totales—
Últimos 30 días—
Últimos 7 días—
Versión actual—