Título de la alerta en Javascript
Por ejemplo, digamos que queremos ejecutar la función showAlert() después de que el cuerpo de la página web esté completamente cargado. Una forma de hacerlo es añadir el atributo onload al elemento <body> de nuestra página web, así:
Prueba a añadir lo anterior a tu página web, luego carga la página y comprueba si funciona. Si no lo hace, probablemente tengas un error. Asegúrate de que has escrito todo exactamente como aparece, incluyendo las mayúsculas y la puntuación. Los lenguajes de programación pueden ser muy exigentes con los errores aparentemente pequeños. (La próxima lección hablará más sobre la depuración). Una vez que lo tengas funcionando, pasa a la siguiente sección.
Hasta ahora en esta lección, hemos llamado a la función showAlert() cuando se carga el cuerpo de la página web. Sin embargo, podríamos activarla utilizando otros eventos. Por ejemplo, podríamos mostrar la alerta sólo si un usuario hace clic en un botón. Pruebe esto:
Este nuevo código añade un botón a su página web. El botón incluye el atributo onclick, que hace que se llame a showAlert() cuando un usuario hace clic en el botón. El evento onclick también funciona para los usuarios de teclado. Si un usuario navega hasta el botón usando la tecla de tabulación, y luego presiona enter, eso también activará la alerta.
Diseño de cajas de alerta en Javascript
El icono de la ventana emergente. SweetAlert2 viene con 5 iconos incorporados que mostrarán una animación correspondiente: advertencia, error, éxito, información y pregunta. Se puede poner en el array bajo la clave “icono” o pasar como tercer parámetro de la función.
Si se establece en false, el usuario no puede descartar la ventana emergente haciendo clic fuera de ella.También puede pasar una función personalizada que devuelva un valor booleano, por ejemplo, si desea desactivar los clics externos para el estado de carga de una ventana emergente.
Si se establece en false, el usuario no puede descartar la ventana emergente pulsando la tecla Esc. También puede pasar una función personalizada que devuelva un valor booleano, por ejemplo, si desea desactivar la tecla Esc para el estado de carga de una ventana emergente.
Si el parámetro de entrada se establece como “select” o “radio”, puede proporcionar opciones. Puede ser un Mapa o un objeto plano, con claves que representan los valores de la opción y valores que representan el texto de la opción. También puede proporcionar un objeto plano o un Map como valores que representarán un grupo de opciones, siendo la etiqueta de este <optgroup> la clave. Por último, también puedes proporcionar una Promise que se resuelva con uno de esos tipos.
Alerta de Javascript
Un mensaje de alerta es un componente incorporado en la web que se utiliza comúnmente en aplicaciones en línea para mostrar mensajes de estado como advertencias, errores, mensajes de éxito, información y consentimientos de confirmación.
En este tutorial, revisaremos algunos frameworks populares para crear mensajes de alerta en React, y luego crearemos nuestro propio mensaje de alerta personalizado con un estilo complejo y características adicionales. El código completo de este tutorial está disponible en el repositorio de GitHub. ¡Empecemos!
La comunidad React ofrece una gran variedad de frameworks de alerta que puedes utilizar en tus proyectos para agilizar el proceso de desarrollo. Antes de construir nuestro componente de mensaje de alerta personalizado, echemos un vistazo a algunos de estos frameworks.
React-Toastify es un paquete ligero basado en Toastify que te permite añadir alertas personalizadas a tu proyecto React. Puedes añadir un mensaje de alerta a tu componente React utilizando React-Toastify con el siguiente fragmento de código:
El componente Chakra UI Alert proporciona componentes React simples, modulares, accesibles, reutilizables y componibles que hacen que sea súper fácil crear y personalizar mensajes de alerta en tu aplicación React.
Alerta personalizada de React
Las alertas, los avisos y las ventanas emergentes de confirmación son absolutamente inestimables en cualquier sitio web o aplicación. Permiten al usuario saber lo que ha sucedido y lo que sucederá en función de sus acciones. En el caso de los diálogos de confirmación, los usuarios también pueden evitar acciones desastrosas como borrar contenido por error.
Esta función toma tres parámetros opcionales. El primero debe ser un objeto que contendrá las opciones que queremos anular en la función. El segundo parámetro es una función que será llamada cuando el usuario confirme una acción y el tercer parámetro es una función que será llamada cuando el usuario descarte el diálogo. Normalmente, la acción de despedir no haría nada, pero es bueno tener la opción.
El HTML para el diálogo de alerta/confirmación se guarda en un archivo PHP separado. Para que el diálogo de alerta sea dinámico, el JavaScipt solicitará este archivo PHP mientras envía algunos datos junto con la solicitud. El archivo PHP utilizará entonces estas peticiones $_GET para rellenar el diálogo. Echemos un vistazo al HTML.
