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 (13)

  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

Deja tu opinión

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