Pop-ups controlados

Post sacado de El escaparate de Rosa.

 

[Modelo 1] Con un sencillo código crearemos un pop-up o ventana emergente, que nuestros visitantes podrán abrir pinchando en un link. 

Podemos usarlo para mostrar una imagen, incluso una captura de otra web, cambiando la url por la de la imagen o del sitio web que queramos mostrar. Eso si, tendremos en cuenta que la ventana tendrá el tamaño que nosotros queramos, sin que nuestros visitantes tengan la posibilidad de agrandarla.

Para mostrar el efecto en nuestra sidebar, en la parte de diseño de nuestra plantilla elegimos un nuevo elemento HTML-Javascript y pegamos el código:

 

 <a href="http://URL-DE-TU-IMAGEN O DE LA PAGINA WEB" target="_blank" onclick="window.open(this.href, this.target, 'width=313,height=450'); return false;">Abrir ventana</a>

  

Donde pone width=300 y height=400 en el código, es donde modificaremos el alto/height y el ancho/width de nuestro pop up. 

 

[Modelo 2] 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)
}

     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".