Para cortar con las alertas prefabricadas y poco personales de la mayoría de los sitios, el desarrollador Michael Leigeber, nos muestra desde su blog cómo crear cuadros de alerta originales utilizando JavaScript.
Los cuadros extralivianos (4.5kb) han sido utilizados para mensajes de error, advertencia, felicitación y confirmación. Revisa el código para ver cómo lo hizo y descarga los archivos desde aquí.
Un acierto en estos cuadros de alerta es que no hace falta agregar nada a tu sitio, excepto referencias al archivo de JavaScript y CSS, si es que decides no incorporarlos en tus archivos existentes. Los <div>s son agregados de forma dinámica al DOM cuando se llama a la función. Este <div> está al inicio del <body> del HTML, antes del contenido. De esta manera se calcula el largo de la página evitando cualquier tipo de error. Sabiendo el largo de la página genera un overlay sobre todo el contenido visible, aclarando lo que está “atrás” del cuadro de alerta.
La variable para este ID y las especificaciones de velocidad y tiempo están disponibles al inicio del archivo JS. Los cuadros de alerta son generados así:
showDialog('Error','You have encountered an error.','error',2);
La primera propiedad es el título de la caja, la segunda el mensaje, la tercera es el estilo de la caja (error, advertencia, felicitación o confirmación) y la cuarta es un auto-ocultar opcional. Dale al auto-ocultar el número de segundos que querés que permanezca visible el cuadro de alerta antes de ocultarse. El mensaje puede llevar HTML y el “look and feel” (el estilo gráfico) puede cambiarse a través del archivo CSS. También puedes incorporar estilos nuevos agregando dos líneas al CSS.
El script fue testeado y funciona en IE 6/7, Firefox 2/3, Opera y Safari. Funciona en IE 8 pero no 100% bien debido a la falta de la propiedad alpha (opacity=xx).
Haz clic para ver el demo >>
Haz clic para descargar el archivo fuente >>
Visita el artículo original de Michael Leigeber.
Miércoles, 30 de Abril de 2008 a las 16.31
Excelente!!! muy original
Jueves, 8 de Mayo de 2008 a las 14.20
Me parece !!Excelente!! pero el cuadro de confirmacion no tiene botones de respuesta de usuario, es practicamente lo que estaba buscando.
Jueves, 8 de Mayo de 2008 a las 14.21
Soy nuevo en el mundo del javascript y me gustaria saber como introducir estos botones de respuesta de usuario al cuadro de tipo confirmacion y obtener la respuesta del usuario.
Miércoles, 11 de Junio de 2008 a las 11.16
Mmm contesto algo tarde pero…. debes integrarlos dentro del mensaje mismo como si fuera codigo html normal, entonces podrías poner un botón que si le das haga lo que tenga que hacer y si pulsa el cancelar pos que simplemente cierre el tema.
Ej:
Espero que te haya servido o almenos para otra persona que llegue por aqui
Miércoles, 11 de Junio de 2008 a las 11.17
Vaya no se vio el ejemplo voy a probar de nuevo… a ver si ahora….
Ej (segunda prueba):
Espero que te haya servido o almenos para otra persona que llegue por aqui
Lunes, 16 de Junio de 2008 a las 10.21
el codigo fuente funciona bien en firefox 2.0 pero en internet explorer 6.0 no funciona al 100%, alguien me puede ayudar con esto, gracias