Las ventanas de diálogo (o cuadros de texto) conocidos en inglés como "Popup Windows" son ventanas modales utilizadas para notificar, advertir o pedir información al usuario.
Las ventanas diálogo también son una forma de prevenir que el usuario interactué con otras partes del programa hasta que el cuadro de texto haya sido cerrado, por tal motivo es recomendable no usarlos en exceso.
Hay tres tipos de ventanas de diálogo que pueden ser creadas con sus respectivos métodos en JavaScript:
Alert
El método alerta window.alert(), despliega un cuadro de texto el cual no requiere información por parte del usuario. Una vez que la función es invocada, el mensaje de alerta aparecerá con el aviso (opcional) correspondiente. El usuario necesitará confirmar el mensaje para que el mensaje de alerta desaparezca.
Ejemplo:
window.alert("Bienvenido a nuestro sitio web");
Confirm
El método de confirmación window.confirm(), es similar al window.alert(), pero además muestra un botón de cancelación en el cuadro de texto. Los botones reflejan los valores booleanos: verdadero para OK y falso para Cancelar
Ejemplo:
var resultado = window.confirm('Estas seguro?');
if (resultado === true) {
window.alert('Okay, si estas seguro.');
} else {
window.alert('Pareces indeciso');
}
Prompt
El método para solicitar información window.prompt(), es generalmente utilizado para requerir información del usuario. Esta función puede tomar dos argumentos, los cuales pueden ser opcionales: el primero es el mensaje que se mostraría al usuario, y el segundo es un valor predeterminado que se mostraría en el cuadro de texto.
Ejemplo:
var edad = prompt('Cuantos años tienes?', '100');
Otras opciones con diferente diseño:
Si los patrones de diseño estándar de las ventanas de diálogo de JavaScript no son de tu agrado, las puedes substituir con varias de las bibliotecas de interfaz de usuario (UI), como por ejemplo SweetAlert que ofrece buenos remplazos paral los modales estándar de JavaScript. Puedes incluirlo en tu HTML por medio de una Red de distribución de contenidos (CDN) y comenzar a usarlo.
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>La sintaxis es la siguiente: swal(titulo, subtitulo, tipoDeMensaje)
swal("Oops!", "Something went wrong on the page!", "error");El código de arriba produciría la siguiente ventana:
SweetAlert de ninguna manera es el único substituto para ventanas modales, pero es decente y fácil de implementar
Traducido del artículo -How to Build a JavaScript Alert Box or Popup Window