Las modernas técnicas de diseño web han permitido a los desarrolladores implementar rápidamente animaciones compatibles con la mayoría de los navegadores. Creo que los mensajes de alerta son muy comunes, porque los cuadros de alerta predeterminados de JavaScript tienden a ser bastante intrusivos y mal diseñados. Esto lleva a los desarrolladores por un camino para descubrir qué soluciones funcionarían mejor para una interfaz más fácil de usar.
Para este tutorial, quiero explicar cómo podemos armar los cuadros de notificación CSS3 que aparecen en la parte superior del cuerpo de la página. Los usuarios pueden hacer clic en las notificaciones para que desaparezcan y finalmente eliminarlas del DOM. Como una característica adicional divertida, también he incluido botones donde puede hacer clic para agregar un nuevo cuadro de alerta en la parte superior de la página. Echa un vistazo a mi muestra de muestra para tener una mejor idea de lo que haremos.
Demo en vivo - Descargar código fuente
Construyendo la pagina
Para empezar, necesitamos crear dos archivos con el nombre? Index.html? y? style.css ?. Incluiré una referencia a la última biblioteca de jQuery alojada en el código CDN de Google. El HTML es bastante sencillo ya que solo necesitamos crear un texto de relleno dentro de un cuadro de alerta. Y todo el JavaScript se ha agregado en la parte inferior de la página para guardar las solicitudes HTTP.
Este es mi código de encabezado para configurar los documentos externos y el doctype HTML5. No muy complicado ya que estamos construyendo una muestra de muestra. Para las ventanas de notificación, he configurado dos estilos diferentes: éxito y error. Hay otros estilos de diseño como advertencias y cuadros de información, sin embargo, no creé estilos alternativos porque quería centrarme más en los efectos.