Ventana flotante con botón cerrar

Esto será algo muy útil cuando debas dejar algún mensaje o aviso para tus lectores. Se trata de una ventanita, con apariencia similar a las de Windows, que es flotante y tiene la opción de cerrar con un efecto fade utilizando un botón.

Insertarla es muy simple, sólo pega este código en un gadget HTML/Javascript y puedes cambiar algunos valores para personalizar la ventana a tu gusto.

<div id='ventana-flotante'>

   <a class='cerrar' href='javascript:void(0);' onclick='document.getElementById(&apos;ventana-flotante&apos;).className = &apos;oculto&apos;'>x</a>

   <div id='contenedor'>

       <div class='contenido'>
Aquí va el mensaje.

       </div>

   </div>

</div>

<style>
#ventana-flotante {
width: 360px;  /* Ancho de la ventana */
height: 90px;  /* Alto de la ventana */
background: #ceffad;  /* Color de fondo */
position: fixed;
top: 200px;
left: 50%;
margin-left: -180px;
border: 1px solid #adffad;  /* Borde de la ventana */
box-shadow: 0 5px 25px rgba(0,0,0,.1);  /* Sombra */
z-index:999;
}
#ventana-flotante #contenedor {
padding: 25px 10px 10px 10px;
}
#ventana-flotante .cerrar {
float: right;
border-bottom: 1px solid #bbb;
border-left: 1px solid #bbb;
color: #999;
background: white;
line-height: 17px;
text-decoration: none;
padding: 0px 14px;
font-family: Arial;
border-radius: 0 0 0 5px;
box-shadow: -1px 1px white;
font-size: 18px;
-webkit-transition: .3s;
-moz-transition: .3s;
-o-transition: .3s;
-ms-transition: .3s;
}
#ventana-flotante .cerrar:hover {
background: #ff6868;
color: white;
text-decoration: none;
text-shadow: -1px -1px red;
border-bottom: 1px solid red;
border-left: 1px solid red;
}
#ventana-flotante #contenedor .contenido {
padding: 15px;
box-shadow: inset 1px 1px white;
background: #deffc4;  /* Fondo del mensaje */
border: 1px solid #9eff9e;  /* Borde del mensaje */
font-size: 20px;  /* Tamaño del texto del mensaje */
color: #555;  /* Color del texto del mensaje */
text-shadow: 1px 1px white;
margin: 0 auto;
border-radius: 4px;
}
.oculto {-webkit-transition:1s;-moz-transition:1s;-o-transition:1s;-ms-transition:1s;opacity:0;-ms-opacity:0;-moz-opacity:0;visibility:hidden;}
</style>

Con eso ya tendrás todo funcionando, pero hay ciertas cosas a tener en cuenta:
Si cambiaste el ancho de la ventana es posible que esta no se centre en el medio de la página por lo que debes reemplazar el valor de color azul que debe ser exactamente la mitad del valor que pusiste en el ancho de la ventana. En el ejemplo, la ventana tiene 360 pixeles de largo, por lo que puse 180px en el valor resaltado.
Para mover la ventana hacia arriba o hacia abajo cambia el valor en color rojo que es 200 por un valor más alto para que la ventana se posicione más abajo, o un valor más pequeño para llevar la ventana hacia arriba.

Recuerda que en el mensaje puedes incluir además de texto, imágenes, una animación o video, o lo que se te ocurra, ya que es un simple contenedor. Y por cierto, puedes ver una demostración de este truco en este blog de pruebas.

ACTUALIZACIÓN
En Internet Explorer al presionar el botón para cerrar la vantanita, esta no se cierra, por los que deberemos condicionar las cosas para que desaparezca, pero de todos modos no lo hará con efecto fade. Añade esto luego del código anterior:

<!--[if IE]>
<style>
.oculto {display:none}
</style>
<![endif]-->