Simulando ventanas de alerta

Alguna vez contaba sobre las llamadas ventanas de alerta, esas pequeñas ventanitas que usan los navegadores para mostrar algún tipo de información: o bien para solicitar la confirmación de algún tipo de acción

Si se siguen usando es porque son útiles y simples de implementar aunque sean poco atractivas. Abrir una ventana desde la página donde estamos y poder controlarla es algo que siempre ha sido molesto, las pestañas de los navegadores nos hacen la tarea más sencilla porque si queremos abrir una página en otra ventana la demora es importante y nosotros siempre queremos que a cada click le corresponda una acción instantánea. No es un capricho, casi es una necesidad ya que si no ocurre así, solemos impacientarnos y hacer click otra vez con lo cual, simplemente añadimos leña al fuego y terminamos con varias ventanas abiertas ... todas repetidas.

Con el tiempo, aparecieron las ventanas modales tipo Lightbox y resolvieron parte del problema pero las ventanas de alerta siguen siendo imprescindibles.

En leigeber hay un script muy sencillo que nos permite simular ese tipo de ventanas y darles algún tipo de presentación gráfica personal. Por supuesto, no las reemplazarán pero, en determinados casos podría llegar a ser una alternativa viable.

En el sitio disponen de un ZIP que contiene el script y los ejemplos pero, si se quiere ahorrar un poco de trabajo, puede usarse este otro ZIP ya modificado para usar en Blogger y donde las imágenes utilizadas han sido alojadas en ImageShack.

Lo que necesitamos entonces son dos archivos, el script y la hoja de estilo. Subimos ambos a un servidor como Google Pages y luego los agregamos en la plantilla antes de </head>:

<script type="text/javascript" src="URL_dialog_box.js"></script>
<link rel="stylesheet" type="text/css" href="URL_dialog_box.css" />

Eso esto todo, ahora, podemos usarlas en cualquier parte del blog para mostrar información de algún tipo.

El script tiene cuatro modelos posibles: Error, Warning, Prompt y Success que en realidad son muy similares y que sólo cambian estéticamente.

Las ventanas se abren simplemente con un enlace donde el atributo HREF será la llamada a la función del script:

<div id="nombre">
  <a href="javascript:showDialog('nombre',''TITULO','contenido','tipo',tiempo);">
    TEXTO/IMAGEN
  </a>
</div>

Donde:

nombre será el ID del bloque que contenga el enlace (es obligatorio que esté dentro de un DIV)
TITULO es el texto que se mostrará en la barra superior de la ventana
contenido es el texto a mostrar que puede o no contener algunas etiquetas HTML
tipo es uno de los tipos definidos (error, warning, prompt, success) y que sólo definen el tipo de gráfico que vemos
tiempo es un valor optativo que colocamos si queremos que la ventana se cierre sola en un determinado momento (el valor indica la cantidad de segundos que permanecerá visible)

Un ejemplo sencillo:

<div id="dialogo">
<a href="javascript:showDialog('dialogo','ERROR','Este es el texto a mostrar.','error',2);">
  CLICK
</a>
</div>

Esta es una ventana de tipo error pero que, en realidad, puede contener cualquier otra cosa, por ejemplo, un mensaje de despedida.

Los otros modelos son similares, sólo cambia el tipo:

Este es el modelo warning o la ventanita amarilla.

Este es el modelo Success o la la ventanita verde

El que falta es el modelo llamado prompt. Supuestamente, debería servirnos para dar una respuesta a algo pero no es así, sólo es una ventanita similar a las anteriores pero de color azul así que, mejor, la cambiamos por algo que sea un poco más personal.

La personalización podemos hacerla directamente desde el CSS de la hoja de estilo. Sólo debemos entender un poco como está armada:

Esta es una breve explicación de cada una de las propiedades.

#dialog { /* es el bloque general de la ventanita */
  padding: 10px;
  position: absolute;
  width: 425px;   /* es el ancho de la ventana y podemos establecer cualquier valor */
  z-index: 200;
}

#dialog-header { /* es la barra superior */
  display: block;
  font-size: 14px; /* el tipo de fuente a usar */
  font-weight: bold; 
  height: 21px; /* la altura y el tipo de fuente están relacionados */
  position: relative;
  padding: 3px 6px 0 6px;
  width: 100%;
}

#dialog-title { /* el texto del título a la izquierda */
  float:left
}

#dialog-close { /* la imagen para cerrar la ventana a la derecha */
  background:url(URL_imagenCERRAR) no-repeat; 
  cursor: pointer;
  float: right;
  height: 11px; /* el tamaño depende de la imagen a usar */
  margin: 3px 3px 0 0;
  width: 11px; /* el tamaño depende de la imagen a usar */
}

#dialog-content { /* es el bloque inferior con el contenido */
  color: #222222; /* el color de los textos del contenido */
  display: block;
  height: 160px; /* la altura del bloque */
  padding: 10px 6px;
  font-size: 13px;
  width: 100%;
}

/* la definición de cada uno de los modelos tiene dos partes */

.errorheader { /* la barra superior */
background:url(URL_imagenFondHeader) repeat-x; /* el fondo es una imagen */
color: #6F2C2C; /* el color del texto */
border: 1px solid #924949; border-bottom: none; /* el borde */
}
.error { /* el bloque inferior */
background:#FFFFFF url(URL_imagenFondo) no-repeat right bottom; /* el fondo es una imagen */
border: 1px solid #924949; border-top: none; /* el borde */
}

/* los otros modelos son iguales, sólo cambian las imágenes y los colores */

.warningheader { ... }
.warning { ... }

.successheader { ... }
.success { ... }

.promptheader { ... }
.prompt { ... }

Como todos los modelos tienen las mismas propiedades excepto las imágenes de fondo y los bordes, si quisiéramos modificarlas deberíamos agregárselas y forzarlas utilizando la palabra !important. Por ejemplo, cambiamos el modelo prompt:

.promptheader {
  background: url(URL_ImagenFondoHeader) repeat-x;
  border: 1px solid #000000; border-bottom:none;
  color:#FF9933 !important; /* establecemos el color del título */
}

.prompt {
  background:#101921 url(URL_ImagenFondoContenido) bottom right no-repeat;
  border: 1px solid #333333; border-top:none;
  color: #FFFFFF !important; /* el color de los textos */
  font-size: 16px !important; /* el tamaño de la fuente */
  font-family: Georgia !important; /* el tamaño tipo de fuente */
}

Por último, si queremos colocar etiquetas HTML en el contenido de las ventanas debemos tener en cuenta dos cosas: primero, no es posible usar cualquiera, el problema fundamental es el uso de las comillas así que muchas son complejas o imposibles. Segundo, debemos cambiar los símbolos < y > por sus respectivos códigos: el signo menor lo escribimos como &lt; y el signo mayor como &gt;

Un pequeño ejemplo del contenido de una ventana con etiquetas, si quisiéramos escribir esto:

<p align=left><small>Este es un ejemplo de una ventana<br>de diálogo personalizada<br>cambiando sólo imágenes de fondo<br>y alguna otra propiedad CSS.</small></p>

Deberíamos colocar lo siguiente

&lt;p align=left&gt;&lt;small&gt;Este es un ejemplo de una ventana&lt;br&gt;de diálogo personalizada&lt;br&gt;cambiando sólo imágenes de fondo&lt;br&gt;y alguna otra propiedad CSS.&lt;/small&gt;&lt;/p&gt;