Acabo de publicar Regala Google Chrome por navidad |

Aviso flotante

By Miguel Ángel Jiménez Achinte On 20:45

Debido a un error de visualización con firefox me di a la busqueda de como poner un cartel flotante que comunicara al visitante lo qu estaba pasando, pero los metodos que probé eran muy largos y poco eficaces. Buscando un poco me encontré con un metodo bastante sencillo utilizando javascript que me permite cerrar una capa y llamarla desde un enlace (abrirla de nuevo).

Para añadirla a la platilla solo debes buscar </head> y justo antes añadir lo siguiente:


<script LANGUAGE="javascript">
function oculta(){
document.getElementById('capa').style.visibility = "hidden";
}
function muestra(){
document.getElementById('capa').style.visibility = "visible";
}
</script>

donde la palabra en negrita 'capa' es el ID (nombre unico) de la capa que contiene el aviso.
Ahora buscamos <body> y justo despues pegamos:

<div id="capa" class="aviso">

<a href="javascript:void(0);" style=" float:right;" onClick="oculta()">Cerrar</a>

Aqui va el contenido o texto del aviso

</div>

si lo dejas tal como está se verá solo una linea de texto en el top de nuestra plantilla, asi que agregaremos algunos estilos usando la clase de la capa 'aviso':

.aviso {
position:fixed;
top:200px;
left:200px;
width:200px;
height:100px;
background:#000;
color:#fff;
}

La propiedad Fixed deja el cartel estatico asi bajemos la barra de desplazamiento, puedes cambiarla por absolute o relative.

Para cerrar el cartel desde un enlace usamos:

<a href="javascript:void(0);" onclick="oculta()">Oculta el letrero</a>

Y para abrirla:

<a href="javascript:void(0);" onclick="muestra()">Muestra el letrero</a>

Para lo demás solo hay que agregar un poco de imaginación y listo:











4 comentarios

  1. Esta bueno el articulo, solo tengo una pregunta, esto tambien puede lograrse en jhoomla con el css

    Posted on 1/18/2011 11:35 a. m.

     
  2. si, en general, los scripts y los codigos css en joomla deben ir en la plantilla que utilices.

    Posted on 1/18/2011 11:50 a. m.

     
  3. Hola, esta muy bueno el codigo! de hecho me sirvio! pero tengo duda si se podra hacer de manera que cuando presiono el input para escribir me salga el mensaje de Bloq Mayus si esta activada antes de que escriba, ya que tengo que presionar una tecla en el input para que me funciones el mensajito! y como que al usuario le confunde :/

    Posted on 7/31/2013 3:01 p. m.

     

Publicar un comentario en la entrada al viejo estilo