Alejandra 29 de abril de 2008 a las 14.05
   Imprimir artículo
elWebmaster.com

Cuadros de alerta personalizados con JavaScript


Cuadros de alerta con javaScriptPara 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.


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Comentarios (14)

  1. Juanu dice:

    Excelente!!! muy original :D

  2. Jayson dice:

    Me parece !!Excelente!! pero el cuadro de confirmacion no tiene botones de respuesta de usuario, es practicamente lo que estaba buscando.

  3. Jayson dice:

    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.

  4. LoBo dice:

    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 ;)

  5. LoBo dice:

    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 ;)

  6. freddy dice:

    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

  7. Marco dice:

    Gracias.- Excelente aporte

  8. Christopher dice:

    Alguien ha visto funcionar esto sobre asp.net ya que trate de adaptarlo pero no me queda, alguna idea?

  9. Deiby dice:

    Existe alguna librer铆a como estas que tenga una funci贸n que me retorne un valor verdadero o falso por ejemplo para poder hacer esto en una pagina ya dise帽ada (sin tener que reescribir todo de nuevo)
    window.alert=nuevoAlert; y tambi茅n
    window.confirm=nuevoConfirm; ya que es un poco fastidioso hacer una migraci贸n de este tipo

  10. Diego Fernando Trujillo dice:

    Muchas gracias. Muy 煤til y estilizado.

  11. Lorena Casta帽eda dice:

    Hola como puedo poner botones en el cuadro de dialogo y obtener el resultado?

    gracias

  12. camilo puertas dice:

    Hola, quisiera saber porque no me funciona este c贸digo cuando trato de ingresarlo a un asp. el c贸digo que tengo es:

    showDialog(‘warning’,’Prueba’,’warning’);

    pero me sale un error, dice que se requiere objeto. Soy nuevo en esto del java, pero quiero saber como agrego este archivo dentro de un ASP.
    Saludos y gracias

  13. Nicolas dice:

    existe alguna manera de usar Negrita en algunas partes del texto del confirm creado por JavaScript, he hecho varios intentos pero no encuentro la manera.

    Agradeceria su ayuda

  14. paolaTrujillo dice:

    Mi duda es, los cuadros de dialogo en java son los mismos que JavaScript? Disculpa si es una pregunta estupida pero no entiendo bien la diferencia :)

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Acceder