Ventana flotante en HTML

Tener un cuadro flotante en nuestra web es útil siempre y cuando lo uses de la manera correcta, básicamente debes evitar que tape el contenido y para nada sobreponerse sobre un banner de Adsense ya que es causal de Baneo. así que teniendo esto en cuenta usa este código con prudencia.

Yo lo utilizo en algunas web para mostrar los botones de ME GUSTA, Twitter y Google Plus, siempre a un lado y posición especifica, ya que si la pantalla es chica (monitores 1024×768 o de tables y celulares), al tener esa posición fija no se va a mostrar ni sobreponer como el área de visualización. aquí un Ejemplo: “PIZARRON DE PESCADORES – EL ANZUELO PERÚ – PARTE II

El código sin usar CSS es el siguiente:

<div style="background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #DDDDDD;
    border-radius: 6px 6px 6px 6px;
    bottom: 50px;
    left: auto;
    margin-left: -120px;
    padding: 10px 0 0;
    position: fixed;
    text-align: center;
    width: 90px;
    z-index: 15;"> 
	<!--Aqui el Codigo-->
</div>

El que evita que se sobreponga sobre el contenido y/o hace que se oculte cuando la pantalla no es Widescreen es el margin-left: -120px; lo puedes comprobar si achicas la ventana de tu navegador mientras visualizas la web

Si lo deseas separado, es decir, como código CSS

<style type="text/css">
.ventana_flotante {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #DDDDDD;
    border-radius: 6px 6px 6px 6px;
    bottom: 50px;
    left: auto;
    margin-left: -120px;
    padding: 10px 0 0;
    position: fixed;
    text-align: center;
    width: 90px;
    z-index: 15;
}
</style>

y la llamada seria:

<div class="ventana_flotante">
<!--Aquí el Código-->
</div>

Posted

in

by

Comments

7 respuestas a “Ventana flotante en HTML”

  1. luis Avatar
    luis

    muy bueno me sirvio

  2. phpProgramer Avatar
    phpProgramer

    Garcias, me sirvio tal cual tu ejemplo

  3. ANONIMO Avatar

    EXELENTE COMPAÑERO ME SIRVIO MUCHO

  4. Ubaldo Avatar
    Ubaldo

    Me sirvio perfectamente para lo que necesitaba, muchas gracias por compartir.

  5. bret Avatar
    bret

    Como hago si quiero agregarle un boton para cerrarlo?

  6. stui Avatar

    Como hago si quiero agregarle un boton para cerrarlo?

  7. stui Avatar

    ¿Como hago si quiero agregarle un botón para cerrarlo?, te agradezco.
    buen post, espero tu pronta respuesta.

Agregue un comentario a bret Cancelar respuesta

Su dirección de correo no se hará público. Los campos requeridos están marcados *