Hace bastante tiempo que buscaba alguna opción mediante la cual pudiera mostrar en mi web un anuncio o banner flotante que se pudiera minimizar o cerrar (ya había dado con una opción en la cual el anuncio flotaba, inserto en un div, pero que no se podía cerrar.
Lo que me daba lio cuando la página se mostraba en resoluciones inferiores a los 1280 px), y no encontraba absolutamente nada. Sin embargo, en estos días, y sin buscar demasido, me encontré con una opción que me ha venido como anillo al dedo, que ma ha caido de perlas, y mediante la cual he logrado solucionar mi problema y mostrar alguna que otra publicidad en mi sitio web.
Se trata de un código en javascript que se puede insetar tanto en sitio que funcionen únicamente en html, o que manejen PHP. Es decir, sirve para prácticamente todo tipo de sitio web. El código para lograrlo es el siguiente:
<div id=’ventana-flotante’>
<a class=’cerrar’ href=’javascript:void(0);’ onclick=’document.getElementById('ventana-flotante').className = 'oculto'’>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;
;
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>
Lo interesante de todo esto es que no sólo se puede insertar publicidad, imágenes, etc., sino que también sirve para poner un botón de me gusta de Facebook, para poner redes sociales, para utilizar a modo de ventana centrada el cargar una página, o para moverlo a un lado, de modo que el banner quede flotante en determinadas resoluciones, sin afectar el contenido (lo que va a resultar muy positivo para lo que necesitemos, pues se mostrará fijo en la pantalla del PC todo el tiempo), etc.
Los valores modificables se han indicado en el código mismo, como el ancho de la ventana o la posición de la ventana flotante mediante coordenadas.