Pop-up controlado (II)

En esta ocasión crearemos mediante un sencillo script un Popup o ventana emergente, que mostrará una imagen o una página web. La diferencia con otros códigos para ventana emergente, es que esta saldrá justo en el centro de la página y las visitas tendrán la posibilidad de agrandar la ventana del popup para ver la imagen o la web en todo su tamaño.
En el caso de las imágenes, estas se adaptaran al tamaño de la ventana, sea este el que sea, así que la imagen siempre se verá completa independientemente de su tamaño o el de la ventana emergente y además con la posibilidad de agrandar la ventana para ver la imagen a su tamaño real.
En el caso de que mostremos en el popup una página web, la ventana emergente se mostrará con barras de scroll y también llevará incluida la posibilidad de agrandar la ventana para mostrar la web a tamaño real.

**

[1] Colocamos el script antes del </head> de nuestra plantilla:

<script language="javascript">

/*
Auto center window script- Eric King (http://redrival.com/eak/index.shtml)
Permission granted to Dynamic Drive to feature script in archive
For full source, usage terms, and 100's more DHTML scripts, visit http://dynamicdrive.com
*/

var win = null;
function NewWindow(mypage,myname,w,h,scroll){
LeftPosition = (screen.width) ? (screen.width-w)/2 : 0;
TopPosition = (screen.height) ? (screen.height-h)/2 : 0;
settings =
'height='+h+',width='+w+',top='+TopPosition+',left='+LeftPosition+',scrollbars='+scroll+',resizable'
win = window.open(mypage,myname,settings)
}
</script>

[2] Colocamos este código para el texto o imagen que vamos a usar como link a la ventana popup:
<a href="URL_DE_IMAGEN_O_WEB" onclick="NewWindow(this.href,'name','400','400','yes');return false">TEXTO_DEL_LINK</a>

[3] El tamaño del popup lo escogemos en 400 y 400 (ancho y alto) y si queremos anular las barras de scroll cambiamos "yes" por "no".

Visto en: Dynamic Drive

0 comentarios:

Publicar un comentario