Cómo crear un cuadro de alerta personalizado en JavaScript
En JavaScript, a menudo queremos crear páginas web que tengan cajas de alerta personalizadas para que una página web sea más atractiva. Además, algunas funcionalidades adicionales también se pueden agregar en el cuadro de alerta con el propósito de personalizar. En tales casos, la creación de un cuadro de alerta personalizado facilita su vida útil y mejora la apariencia del sitio web.
Este blog ilustrará los métodos para crear cajas de alerta personalizadas en JavaScript.
Cómo diseñar un cuadro de alerta personalizado en JavaScript?
Para crear un cuadro de alerta personalizado en JavaScript, puede utilizar:
- Biblioteca "Sweetalert"
- Biblioteca "jQuery"
Ahora pasaremos por cada uno de los dos enfoques uno por uno!
Método 1: Cree un cuadro de alerta personalizado en JavaScript usando la biblioteca Sweetalert
Sweetalert es una biblioteca JavaScript utilizada para personalizar alertas en aplicaciones y sitios web web con la ayuda de un botón. Puedes utilizar su "Hacer un giro.fuego()Método para crear un cuadro de alerta y personalizarlo usando CSS. Se puede hacer especificando el "Red de entrega de contenidos"(CDN) enlace de la biblioteca Sweetalert en el""Etiqueta para acceder a él.
Ejemplo
En el siguiente ejemplo, cargaremos el Archivo "JQuery" y "CDN" Archivo en nuestras etiquetas de script de la siguiente manera:
Ahora, aplicaremos CSS en el botón. Su estilo incluye el "relleno"Que establecerá el área general del botón en 15px, y"texto alineado"Alineará el texto con el centro:
Entonces, crea un "botón"Nombrado el cuadro de alerta personalizado que activará el cuadro de alerta y asignará"showalert"Como su ID a la que accederá la función JavaScript:
Por último, acceda a la ID del botón especificado y aplique el "hacer clic()"Método en él. Como resultado, cuando se hace clic en el botón, el "Hacer un giro.fuego()El método "devolverá el texto correspondiente en un cuadro de alerta:
La salida de la implementación anterior dará como resultado lo siguiente:
Método 2: Cree un cuadro de alerta personalizado en JavaScript usando la biblioteca jQuery
JQuery es una biblioteca de JavaScript que hace que el manejo de eventos sea mucho más simple de implementar con una API fácil de usar. Puede utilizarlo para obtener la identificación y la clase del cuadro de alerta y aplicarles diferentes métodos para crear un cuadro de alerta personalizado.
El siguiente ejemplo explica el concepto declarado.
Ejemplo
En primer lugar, cargaremos la biblioteca JavaScript "JQuery"En nuestro programa:
Ahora, inicializa el "Div ID", "Div Clase" y "Clase de botón" En el archivo HTML:
Este es un cuadro de alerta personalizado.
En el siguiente paso, incluiremos un botón llamado "Habilitar el cuadro de alerta personalizado". Funcionará de tal manera que cuando se haga clic en el botón, el "al hacer clic"El evento activará el"showalert ()" método:
Después de eso, definiremos la función showalert () que acepta dos argumentos. En su cuerpo, accederemos a la identificación Div, obtendremos el mensaje de clase Div y la clase de botones. El "texto()"El método devolverá el contenido de texto del mensaje y el"desatar()El método "eliminará los controladores de eventos del mensaje. Cuando se haga clic en su botón, el cuadro de alerta se ocultará. Por último, el "hacer clic()Se aplicará el método para el mensaje de manejo en el cuadro de alerta:
Estilizar el cuadro de alerta personalizado para hacerlo atractivo:
Producción
Hemos discutido diferentes métodos creativos para crear un cuadro de alerta personalizado en JavaScript. Puede aplicar cualquiera de los métodos de acuerdo con sus requisitos.
Conclusión
Para crear un cuadro de alerta personalizado en JavaScript, puede usar el "Biblioteca Sweetalert, que incluye un "CDNArchivo "para habilitar el"Hacer un giro.fuego()Método ", y"JQueryLa biblioteca, que cargará la biblioteca jQuery en el proyecto, obtendrá varios atributos del cuadro de alerta y aplicará diferentes funcionalidades en el cuadro de alerta. Este artículo explicó los métodos para crear cuadros de alerta personalizados utilizando JavaScript.