Simular una venta modal

En su momento vimos como construir un bloque emergente que se solapaba al contenido de nuestra página y que funcionaba al estilo de las ventanas modales que se usan -sobre todo- para las galerías de imágenes. Splash screen llamamos al invento, aunque no con mucha fortuna, todo hay que decirlo.

Para que el efecto fuera más parecido a las susodichas ventanas modales, sólo nos faltaba conseguir que todo el contenido de la página excepto el propio bloque emergente, atenuara su color a la manera que ocurre con Lightwindows, Lytebox y todos estos.

Pues a través de un sistema de capas solapadas, vamos a simular algo parecido. De esta manera, si sólo vamos a necesitar este efecto para usarlo de forma esporádica, nos podemos ahorrar instalar el script, así como la demora que produce su carga para todas las páginas.

Partiendo de la pestaña vertical que vimos el otro día, a la izquierda podeis pinchar para ver un ejemplo del resultado. Si os gusta, a continuación teneis la explicación de cómo montar el código y al final el código completo para poder copiar y pegar.

(1) En primer lugar creamos el pequeño script que muestra/esconde elementos. Esto también se explicó anteriormente y si ya lo instalasteis, no será necesario hacerlo otra vez.

1

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

(2) Después, creamos la pestaña con el enlace. En esta ocasión el enlace tiene que ser la llamada al script anterior y que permite por un lado visualizar/esconder una capa de color negro semitransparente y por el otro visualizar/esconder un bloque de información. Como lo de la pestaña ya lo vimos anteriormente, simplemente marcamos en verde la forma de hacer estas llamadas.

2

<style type="text/css">
#contenedorizda {
position:fixed;
top:25%;left:0px;
width:38px;height:102px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRbmRuAoHhxjcEu9bDrkbjNKgS5fRZFD8W2siVcuwQelB3Cu_BujP0KaRBTwR-et2gYEH2xRj0dvQ1UPaNCKtGqxJ1iWDAyLBiilzxeihKb3cpccfIh_V6YTSw0DXXmVgRZX9kfeRuLyY/s200/ejemplo.jpg) no-repeat transparent -4px 0px;
z-index:10;
}
</style>
<a href="javascript:plegardesplegar('idatenuar');javascript:plegardesplegar('idbloque');">
<div id="contenedorizda" onmouseover="this.style.backgroundPosition='0px 0px';" onmouseout="this.style.backgroundPosition='-4px 0px';"></div>
</a>

(3) Por último, creamos las capas con la clase .invisible para que inialmente no se vean. Importante añadirle a cada una, el mismo id que pusimos en la llamada del script explicada en primer lugar de esta entrada: idatenuar e idbloque.

La primera capa (idatenuar) formará la atenuación del contenido de la página. Para ello se posiciona de forma fija, se le hace ocupar el 100% del alto/ancho de la página y además se le añade una transparencia (80% en el ejemplo). Con el z-index:99 conseguimos que la capa negra semitransparente se quede por encima de la página.

3

<div class="invisible" id="idatenuar" style="z-index:99; position:fixed; top:0px; left:0px; overflow:visible; height:100%; width:100%; background:#000000; -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80); filter:alpha(opacity=80); -moz-opacity:0.8; opacity: 0.8; -khtml-opacity: 0.8;"></div>

(4) Ahora haremos una segunda capa (idbloque) que ocultamos también con la clase invisible, que se fijará de la misma manera, pero que ocupará un espacio menor (400x300 px en el ejemplo). Habrá que colocarle un z-index superior al de la anterior capa para que se quede por encima. Dentro de ella, además del contenido que queremos mostrar, insertamos un DIV con una X que incluye enlace al javascript creado al principio y que nos permitirá cerrar tanto la anteriormente creada capa negra (idatenuar) como la que vamos a crear ahora(div id="idbloque").

4

<div class="invisible" id="idbloque" style="position:fixed; overflow:visible; top:50%; left:50%; width:400px; height:300px; margin-top:-150px; margin-left:-200px; border:5px solid #990000; background:#ffffff; color:#000000; padding:20px; text-align:center; z-index:100;">

<div style="position:absolute;top:-25px;right:0px;background:#ffffff;color:#000000;padding:1px;">
<a href="javascript:plegardesplegar('idatenuar');javascript:plegardesplegar('idbloque');">[X]</a>
</div>

AQUI EL CONTENIDO DE LA VENTANA
</div>

Un esquema por si no se ha entendido muy bien:

idatenuar: capa de color negro con transparencia
idbloque: contenido a mostrar en ventana emergente

1.
- Estilo script con función plegardesplegar
- Script con funcion plegardesplegar

2.
- Estilo pestaña
- Pestaña con enlace a función plegardesplegar, bloques idatenuar e idbloque

3.
- Capa negra semitransparente intermedia que ocupa todo el espacio disponible

4.
- Capa con el contenido a mostrar
- Anidada dentro de esta capa, otra con un enlace a la función plegardesplegar y que permite cerrar la ventana

Click aquí para poder copiar todo el código junto [+/-]
(comillas dobles y simples sustituidas por ' y &quot; respectivamente
para que funcione bien dentro de la plantilla Blogger)

<style type='text/css'>#contenedorizda {position:fixed;top:25%;left:0px;width:38px;height:102px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRbmRuAoHhxjcEu9bDrkbjNKgS5fRZFD8W2siVcuwQelB3Cu_BujP0KaRBTwR-et2gYEH2xRj0dvQ1UPaNCKtGqxJ1iWDAyLBiilzxeihKb3cpccfIh_V6YTSw0DXXmVgRZX9kfeRuLyY/s200/ejemplo.jpg) no-repeat transparent -4px 0px;z-index:10;}</style><a href='javascript:plegardesplegar(&quot;idbloqueoculto&quot;);javascript:plegardesplegar(&quot;idcerrarbloque&quot;);'><div id='contenedorizda' onmouseover='this.style.backgroundPosition=&quot;0px 0px&quot;;' onmouseout='this.style.backgroundPosition=&quot;-4px 0px&quot;;'></div></a>
<style type='text/css'>.visible {display:block;}.invisible {display:none;}</style><script type='text/JavaScript'>function plegardesplegar(identificacion){var menu = document.getElementById(identificacion);if(menu.className == 'visible'){menu.className = 'invisible';}else{ menu.className = 'visible';} }</script>
<div class='invisible' id='idbloqueoculto' style='background: rgb(0, 0, 0) none repeat scroll 0% 0%; overflow: visible; z-index: 99; position: fixed; top: 0px; left: 0px; height: 100%; width: 100%; -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80); filter:alpha(opacity=80); -moz-opacity:0.8; opacity: 0.8; -khtml-opacity: 0.8;'></div>
<div class='invisible' id='idcerrarbloque' style='border: 5px solid rgb(153, 0, 0); padding: 20px; background: rgb(255, 255, 255) none repeat scroll 0% 0%; overflow: visible; position: fixed; top: 50%; left: 50%; width: 400px; height: 300px; margin-top: -150px; margin-left: -200px; color: rgb(0, 0, 0); text-align: center; z-index: 100;'><div style='padding: 1px; background: rgb(255, 255, 255) none repeat scroll 0% 0%; position: absolute; top: -25px; right: 0px; color: rgb(0, 0, 0);'><a href='javascript:plegardesplegar(&quot;idbloqueoculto&quot;);javascript:plegardesplegar(&quot;idcerrarbloque&quot;);'>[X]</a></div>Como todo esto está dentro de un DIV, aquí podeis poner lo que gusteis: un texto, una imagen, un enlace, un vídeo, un formulario...</div>

[X]

Como todo esto está dentro de un DIV, aquí podeis poner lo que gusteis: un texto, una imagen, un enlace, un vídeo, un formulario...

¿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