Men煤 Cerrar

Ocultar 馃憖 y Mostrar DIV con codigo HTML y JavaScript

JS HTML CSS

Una de las cosas que m谩s nos interesan a los webmasters es realizar un sitio con contenido dinamico y que por sobre todo sea completamente atractivo para el usuario. En muchos casos hay informaci贸n que no deseamos mostrar salvo que el usuario quiera verla (como comentarios), y debemos ocultar dicho div, y tan solo mostrarlo cuando 茅l usuario desea.

Para esto utilizamos Javascript y CSS para lograr nuestro proposito.
Lo mismo ser铆a con divs flotantes s贸lo que a los mismos hay que colocarles diferentes funciones javascript y su posici贸n deber谩 ser absolute o relative dependiendo de lo que busquemos.

 

Para mostrar y ocultar un div debemos instanciar un div con un ID 煤nico y en el estilo incluir style=鈥漝isplay:none;鈥 por ejemplo:

<div id=鈥漟lotante鈥 style=鈥漝isplay:none;鈥> </div>

Luego debemos realizar dos funciones en javascript para mostrar y ocultar dicho div respectivamente.

<script>

function mostrardiv() {

div = document.getElementById(鈥榝lotante鈥);

div.style.display = 鈥;

}

function cerrar() {

div = document.getElementById(鈥榝lotante鈥);

div.style.display=鈥檔one鈥;

}

</script>

Una vez hecho esto, tenemos las funciones en javascript que mostrar谩n y ocultar谩n el div cuando el usuario haga click en una imagen o un texto con el link a la funci贸n, como en el siguiente ejemplo:

<div id=鈥漨ostrarDiv鈥><a href=鈥漥avascript:mostrardiv();鈥>Mostrar Div</a></div> <div id=鈥漟lotante鈥 style=鈥漝isplay:none;鈥> Este es un div oculto <br><a href=鈥漥avascript:cerrar();鈥> presiona aqu铆 para cerrar</a> </div>


Te invitamos a visitar nuestros canales en y Suscribirte

Te Recomendamos 鉃   Configuracion de 馃摡 Correo Electronico GoDaddy con Cpanel Linux

S铆guenos en Twitter Unete a n uestro grupo de Telegram


Suscr铆bete por correo electr贸nico

Recibe notificaciones de Spek Regg

脷nete a otros 41 suscriptores


Publicado en Soporte Tecnico

Te puede interesar...

Deja una respuesta

Tu direcci贸n de correo electr贸nico no ser谩 publicada.