3.4 KiB
title | localeTitle |
---|---|
Popup Boxes | Cajas Popup |
Cajas Popup
Los cuadros emergentes (o cuadros de diálogo) son ventanas modales que se usan para notificar o advertir al usuario o para obtener información del usuario.
Los cuadros emergentes evitan que el usuario acceda a otros aspectos de un programa hasta que se cierre la ventana emergente, por lo que no deben utilizarse en exceso.
Hay tres tipos diferentes de métodos emergentes que se usan 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 solicitud se utiliza normalmente para obtener la entrada de texto del usuario. Esta función puede tomar dos argumentos, los cuales son 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 predeterminadas de JavaScript, puede sustituirlas en varias bibliotecas de UI. Por ejemplo, SweetAlert proporciona un buen reemplazo para los modales estándar de JavaScript. Puede incluirlo en su HTML a través de un CDN (red de entrega de contenido) y comenzar a usarlo.
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
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 subsituto para los modales estándar, pero es limpio y fácil de implementar.