Cubrir una capa con otra que se puede ocultar con un click

Con este código lo que haremos será solapar una capa con el contenido que queramos, por encima de otro elemento del blog. En un primer ejemplo, esa capa solapada que se podrá cerrar con un click, la vamos a hacer translúcida, de manera que se podrá ver parcialmente la información que estuviera debajo. En otros ejemplos veremos otros casos posibles con el mismo sistema

Para ello vamos a usar un JavaScript básico que ya hemos utilizado en otras ocasiones y que por tanto, es posible que ya tengáis en vuestra plantilla. Se trata de un pequeño CSS con las clases visible e invisible y que precisamente hace que la capa bajo esa clase se vea o no se vea.

Seguido viene una función (plegardesplegar) que intercambia estas dos clases cuando nos sea necesario. Con estas dos cosas podremos conseguir a golpe de ratón, que una capa pueda desaparecer.

Este es el trozo que habría que insertar antes de vuestro </head>. Si lo tenéis, evidentemente no será necesario este paso:

<style type='text/css'>
.visible {display:block;}
.invisible {display:none;}
</style>
<script type='text/JavaScript'>
function plegardesplegar(identificacion){
var elemento = document.getElementById(identificacion);
if(elemento.className == "visible"){
elemento.className = "invisible";
}
else{
elemento.className = "visible";
}
}
</script>

Para este caso concreto, a continuación añadimos en el mismo sitio el estilo para la capa que quedará superpuesta por encima:

<style type='text/css'>
#capasuperior {
position: absolute;
top:0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 99;
opacity: 0.8;filter: alpha(opacity=80);
background: #000000;
}
</style>

Según el uso que le vayáis a dar a esto, puede que queráis cambiar el background por una imagen o modificar e incluso suprimir la transparencia (opacity).


Ahora es cuando tenemos que localizar nuestro elemento a ocultar con la capa semitransparente. Supongamos un caso fácil en el que queremos "tapar" una imagen que tenemos en un post. El código que aparecerá por defecto para una imagen está marcado en gris. Lo demás es precisamente lo que tendremos que añadir y para distinguirlo, está marcado con negrita:

<div class="separator" style="clear: both; text-align: center;position:relative;>

<div class="visible" id="capasuperior">
Aquí iría el contenido que queremos mostrar por encima del otro elemento. Podemos darle estilo metiéndolo a su vez dentro de un SPAN o en otro DIV
<p><a href="javascript:plegardesplegar ('capasuperior');">CERRAR [X]</a></p>
</div>

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjo_xSLeDW675U8qVFMXHHCdBzKeSsJGRuQH6F9SdvroWeyf1GwCrBG7bIdyrSWBBofOMNMiF0OLxKBMkZgQtcCEMbgcdDxKGhm5Bh5CYB7aZOczzPz8Lhwgv_J_sxbr5d16-3riG9lb2CS/s1600/Sunrise1.jpg" imageanchor="1" style="margin-left:1em; margin-right:1em;"><img border="0" height="301" width="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjo_xSLeDW675U8qVFMXHHCdBzKeSsJGRuQH6F9SdvroWeyf1GwCrBG7bIdyrSWBBofOMNMiF0OLxKBMkZgQtcCEMbgcdDxKGhm5Bh5CYB7aZOczzPz8Lhwgv_J_sxbr5d16-3riG9lb2CS/s400/Sunrise1.jpg" /></a></div>

Importante insertar en la capa original (la que quedará inicialmente por debajo) un position:relative; tal y como se ve aquí arriba. Si no está contenida en un DIV y no podemos añadir ese atributo, entonces la tendremos que meter en uno tal y como veremos en el ejemplo posterior a este.

PINCHA EN "CERRAR" PARA VER LA BONITA IMAGEN QUE TE HEMOS PREPARADO.

CERRAR [X]

La utilidad de esto puede ser distinta según vuestras necesidades. Por ejemplo a José le venía bien tapar cierto gadget de la barra lateral y que sólo se descubriera al pinchar sobre él.

Para hacer esto buscaríamos el código del gadget en la plantilla (con Expandir Plantillas de Artilugios seleccionado) y repetimos lo hecho anteriormente. Ahora tenemos en cuenta que el artilugio estará entre etiquetas WIDGET y que no contará con ningún sitio dónde podamos añadir el position:relative;, por lo que añadimos un DIV que englobe por entero el código del gadget tal y cómo habíamos mencionado anteriormente:

<b:widget id='Slideshow1' locked='false' title='Presentación' type='Slideshow'>
<b:includable id='main'>

<div style='position:relative;'><!-- DIV añadido -->
<div class='visible' id='capasuperior'>
Aquí iría el contenido que queremos mostrar por encima del gadget.
<p><a href='javascript:plegardesplegar ("capasuperior");'>CERRAR [X]</a></p>
</div>

<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<div class='slideshow-container' expr:id='data:widget.instanceId + &quot;_slideshow&quot;'>
<span class='slideshow-status'>Loading...</span>
</div>
</div>
<b:include name='quickedit'/>

</div> <!-- Cierre DIV añadido -->

</b:includable>
</b:widget>

También se podría utilizar para plantear algún tipo de noticia, juego o acertijo, de manera que al pinchar se revele el contenido oculto:

Los milagros del maquillaje.
¿Quién es esta famosa cantante y actriz?

Descubrir nombre

Correcto. Esta es...
¡Jeniffer López!

Bueno, son cosas que sirven para ir aprendiendo a manejarse con el HTML, JavaScript y CSS. Quizás ahora no os haga falta para nada, pero recordando que esto se puede hacer, cualquier día os puede sacar de un apuro... al igual que con todo lo que vamos explicando.

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir

Twitter

Pinterest

Facebook

Linkedin

Copy URL

Compartir

Twitter

Pinterest

Facebook

Linkedin

Y muchos más artículos interesantes si nos sigues en...

• Google
• Facebook
• Twitter