20
mar

iFrame transparente con thickbox

ThickBox es una librería motorizada por jQuery que permite mostrar tanto imágenes como código html.
La finalidad es crear un iframe con el efecto del ThickBox con fondo transparente utilizando un png con transparencia.
En el ‘head’ hacemos las llamadas necesarias:

<link rel="stylesheet" type="text/css" href="css/iframe.css" media="screen" />
<script language="javascript" type="text/javascript">var CLOSE = "Cerrar";</script>
<script language="javascript" type="text/javascript" src="javascript/jquery-1.3.2.min.js"></script>
<script language="javascript" type="text/javascript" src="javascript/browser.detect.js"></script>
<script language="javascript" type="text/javascript" src="javascript/thickbox.js"></script>

La hoja de estilo iframe.css es la del iFrame.
La librería jquery-1.3.2.min.js es el motor de la web (por así decirlo).
Utilizo el Browser detect (browser.detect.js) porque para llamar al iframe se utilizan ‘filter’ y así especifico al navegador el elemento que necesita sin perjudicar a los demás.

En el ‘body’ insertamos lo siguiente:

Lorem ipsum dolor

frame_png.php – Nombre del fichero físico.
KeepThis=true&TB_iframe=true – Parámetros necesarios para hacer la llamada al iFrame con thickbox.
height - La altura del iframe (tendrá que ser la misma altura que la capa del iframe).
width - La anchura del iframe (tendrá que ser la misma anchura que la capa del iframe).
modal=true – Modo de ejecución.

Más información aquí.

El fichero iframe.
En el head insertamos los siguientes estilos:

<style type="text/css" media="all">
body {
	background-color:transparent; /* fondo transparente para los navegadores NORMALES */
	font-family:Arial, Helvetica, sans-serif; font-size:14px;

}
#capaPng {
	text-align:center;
	background:url(imagenes/huevo.png) no-repeat top center;
	display:block;
	width:411px;
	height:500px;
}
#capaPng p {padding:90px 70px 0 70px;}
#capaPng div {padding:120px 53px 80px 52px;}
</style>
<!--[if gte IE 6]>
<style type="text/css">
    #capaPng {background-image:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (src='imagenes/huevo.png', sizingMethod='crop');}
</style>
<![endif]-->

He añadido una condicional para que IE coja que png transparente, lo podríamos a ver hecho con una hoja de estilos aparte pero así también aprendemos que también se le pueden añadir condiciones al Internet Explorer, en los próximos días añadiré un artículo sobre los condicionales de dicho navegador.

Y para finalizar en el ‘body’ añadimos esto:

<div id="capaPng">
<p>Contenido. <br /><br /><br />
<a href="javascript:void(0);" onClick="self.parent.tb_remove();" title="Cerrar" style="position:absolute; z-index:2;"></a></p>
</div>

Para quitar el iFrame utilzamos un elemento ‘onClick’ en el enlace:

onClick="self.parent.tb_remove();"

Ejemplo aquí.
Descarga aquí.

Bookmark and Share
aaa

1 Comentario

Tienes que estar conectado para publicar un comentario.

Comentarios RSS Feed   TrackBack URL