Los cuadros emergentes (o cuadros de diálogo) son ventanas modales que se utilizan para notificar o advertir al usuario, o para obtener información del usuario.
Los cuadros emergentes impiden que el usuario acceda a otros aspectos de un programa hasta que se cierre el elemento emergente, por lo que no deben utilizarse en exceso.
Hay tres tipos diferentes de métodos emergentes utilizados en JavaScript: window.alert (), window.confirm () y window.prompt ().
Alerta
El método de alerta muestra mensajes que no requieren que el usuario ingrese una respuesta. Una vez que se llama a esta función, aparecerá un cuadro de diálogo de alerta con el mensaje especificado (opcional). Los usuarios deberán confirmar el mensaje antes de que desaparezca la alerta.
Ejemplo:
window.alert("Welcome to our website");
Confirmar
El método de confirmación es similar a window.alert(), pero también muestra un botón de cancelación en la ventana emergente. Los botones devuelven valores booleanos: verdadero para Aceptar y falso para Cancelar.
Ejemplo:
var result = window.confirm('Are you sure?'); if (result === true) { window.alert('Okay, if you're sure.'); } else { window.alert('You seem uncertain.'); }
Rápido
El método de aviso se utiliza normalmente para obtener la entrada de texto del usuario. Esta función puede tomar dos argumentos, ambos opcionales: un mensaje para mostrar al usuario y un valor predeterminado para mostrar en el campo de texto.
Ejemplo:
var age = prompt('How old are you?', '100');
Otras opciones de diseño:
Si no está satisfecho con las ventanas emergentes de JavaScript predeterminadas, puede sustituirlas en varias bibliotecas de interfaz de usuario. Por ejemplo, SweetAlert proporciona un buen reemplazo para los modales estándar de JavaScript. Puede incluirlo en su HTML a través de una CDN (red de entrega de contenido) y comenzar a usarlo.
La sintaxis es como tal: swal(title, subtitle, messageType)
swal("Oops!", "Something went wrong on the page!", "error");El código anterior producirá la siguiente ventana emergente:
SweetAlert no es de ninguna manera el único sustituto de los modales estándar, pero es limpio y fácil de implementar.
Más información:
- MDN window.alert ()
- MDN window.confirm ()
- MDN window.prompt ()