Reemplace cuadros de alerta de JavaScript con esta alternativa receptiva

Las ventanas emergentes de alerta de JavaScript son detestadas por casi todos. Obligan su atención y adelantan al navegador, por lo que debe cerrarlos antes de poder interactuar con la página.

En la era moderna, podemos hacerlo mejor que los cuadros de alerta de JavaScript . SweetAlert2 es probablemente la mejor solución.

Es un script emergente impulsado por JavaScript que está diseñado para ser totalmente receptivo y admitir la accesibilidad para todos los usuarios.

Naturalmente, también es de código abierto y de libre acceso en GitHub si quieres profundizar en el código.

Pero, el verdadero tesoro es la demostración en la página web principal de SweetAlert. Ofrece una comparación directa entre el cuadro de alerta de JavaScript original y el mensaje de SweetAlert2.

Lo curioso es que los fragmentos de código no parecen tener mucha diferencia. Puede ejecutar SweetAlert2 con una línea de código como una alerta típica de JavaScript, aunque esa línea puede ser más larga en comparación.

Con SweetAlert, tiene más control sobre el estilo de la ventana emergente, la animación, los colores de los botones y los estilos de texto. Incluso puede insertar imágenes o videos en el cuadro de alerta.

Sin embargo, la mejor característica absoluta es que SweetAlert2 no supera a todo el navegador . Si ejecuta un pop-up de SweetAlert2, solo se mostrará en esa pestaña, por lo que incluso si el usuario está navegando en otro sitio, no se le dirigirá con fuerza a su pestaña solo porque apareció una alerta.

En última instancia, esto aumenta el compromiso del usuario porque las personas no son protegidas debido a prácticas de UX sospechosas.

Puede configurar temporizadores de cierre automático, confirmar / rechazar botones e incluso personalizar la animación utilizando bibliotecas de terceros como Animate.css.

Si hay alguna secuencia de comandos que debe usar en lugar de la típica alerta de JavaScript, debe ser SweetAlert2. Esto es totalmente gratuito, de código abierto, y ofrece un montón de opciones personalizadas que harán que cada desarrollador web sonría de oreja a oreja.

Visite el sitio web principal para obtener más información y ver algunos ejemplos en vivo . También puede navegar por el repositorio de GitHub si desea ver los archivos y verificar los registros de liberación.