Crear ventanas PopUp

|

Las ventanas PopUp son esas ventanas que se abren aparte del sitio web que estamos viendo, y si bien tienen muy mala fama porque generalmente están llenas de publicidad que no queremos ver y que no solicitamos, ahora puedes reivindicarlas dándoles funciones útiles como abrir un formulario, una foto, un texto, etc.

Primero hay que ir a Diseño > Edición de HTML y pegar antes de </head> lo siguiente:
<!-- script pop up -->
<script LANGUAGE='JavaScript'>
function popUp(URL) {
day = new Date();
id = day.getTime();
eval(&quot;page&quot; + id + &quot; = window.open(URL, &#39;&quot; + id + &quot;&#39;, &#39;toolbar=0,scrollbars=0,location=0,statusbar=0,menubar=0,resizable=0,width=600,height=400,left = 212,top = 184&#39;);&quot;);
}
</script>
<!-- fin script -->

Puedes cambiar estos valores si quieres mostrar lo siguiente:
Toolbar (barra de herramientas)
Scrollbars (barras de desplazamiento)
Location (barra de direcciones)
Statusbar (barra de estado)
Menubar (barra de menú)
Resizable (modificar tamaño de la ventana)

Sólo cambia el 0 por un 1 si es que quieres mostrar algo de lo anterior. El tamaño de la ventana lo puedes cambiar donde dice width (ancho) y height (alto).

Ahora en una entrada o elemento HTML/Javascript hay que poner lo siguiente:
<a href="javascript:popUp('URL del documento')">Abrir ventana PopUp</a>

Sólo cambia la URL del documento por la dirección donde tengas alojada la imagen, el formulario o la página que se vaya a abrir en la ventana PopUp.

Abrir ventana PopUp


También puedes hacer que se abra mediante un botón cambiando lo anterior por eso:
<form>
<input type=button value="Abrir ventana PopUp" onClick="javascript:popUp('URL del documento')">
</form>





O incluso con una imagen:
<a href="javascript:popUp('URL del documento')"><img src="URL de la imagen" /></a>



NOTA: Los ajustes para mostrar la barra de direcciones, barra de estado, etc. en muchos exploradores no funciona así que es posible que se abra sin mostrar ninguna opción de las anteriores.

44 comentarios:

cyberbloggero dijo...

FELICIDADES POR EL NUEVO PR !!!!!!!

Esta muy bueno este truco, generalmente cuando quieres que se carga rápido el blog. Así se ahorra el tiempo que respecta a las imágenes... que por mas pequeñas que sean... demoran un poco el proceso.

Una pregunta: la foto que pusiste en la ventana pop-up ... ¿es de tu jardín?


Un abrazo!!!!

pd: ahora que eres PR 2 ¿seguirás visitando mi blog? jajaja.

El Potro™ dijo...

Tienes razón, entre tanto gadget, imágenes, videos y una mala conexión los blogs tardan horas en abrirse y esto aligera mucho la carga.
Felicidades igual a ti por tu PageRank, seguiré visitando tu blog sólo porque igual subiste de categoría, jajaja.
P.D. Si ese fuera mi jardín seguro el blog sería de poesía para enamorados, jaja.

cyberbloggero dijo...

Jajajajajaja!!!!!!

Nunca me has hecho reir tanto!

ya me imagino tu blog para enamorados!!!!

"El Jadin del Potro"

"todos los Scripts que necesitas para enamorar"

Nunca digamos nunca bro... ya veo que blogger nos vuelve locos y terminamos dos bohemios haciendo poemas en HTML. jajajaja.

El Potro™ dijo...

jajajajaja, el slogan está buenísimo, aunque el nombre tal vez lo dejé en "El rincón del Potro".

WeS dijo...

jajaja los ciudadanos nos mudaremos al rincon del potro....XD jajaja

ntc

sta bueno esto yo creo lo hare con unas cosas en mi blog para que no tarde tanto en cargar...XD

saludos

www.bonaisima.com dijo...

No se que estoy haciendo mal ,pero no me funciona ,he hecho todo al pie de la letra y nada..

El Potro dijo...

Quizá la URL de la ventana que se abrirá es la que no estás poniendo de forma correcta.

CREATIVOZ PUBLICIDAD dijo...

como le hago para que se habra automaticamente al abrir mi blog

El Potro dijo...

Hola CREATIVOZ PUBLICIDAD

Pega antes de </head> esto:

<script language='Javascript'> open(&#39;URL del documento&#39;,&#39;Titulo de la página&#39;,&quot;toolbar=0,location=0,status=0,menubar=0,scrollbars=yes,resizable=yes,width=490,height=250&quot;);</script>

Cambia la URL del documento y listo.
Saludos.

Alberto Alarcón dijo...

Amigo

Tengo un gadget en mi slidebar que sirve para que los lectores envien mensajes a mi correo. ¿cómo puedo hacer para que ese gadget aparezca como un pop up?

De antemano agradezco tu respuesta.

El Potro dijo...

Hola Alberto Alarcón,

Para eso necesitarías tener todo el formulario en PHP y veo que sólo tienes en PHP lo que hace funcionar el envío de mensajes, así que no se puede.

Saludos.

Alberto Alarcón dijo...

Estimado Potro

y ¿puedo hacer que esta página aparezca en pop up?

http://www.emailmeform.com/fid.php?formid=473541

Si es posíble indícame cómo porque estoy tratando y aún no encuentro la forma. Un abrazo.

El Potro dijo...

Sigue el mismo procedimiento que explico en este post y en donde dice URL del documento ahí pon esta dirección web que acabas de darme.
Saludos.

Alfonso E. Saer dijo...

Saludos, amigo Potro.

Muchas gracias por la ayuda, se le agradece mucho y disculpa por el tiempo quitado. Excelente su blog, no puedo esconder que gracias a él tengo una mejor página, jeje.

Saludos bro!!

El Potro dijo...

Hola Alfonso E. Saer,

No me has quitado nada, el tiempo invertido en este blog es con la intención de tratar de ayudar y me alegro saber que así ha sido.
Muchas gracias por tus comentarios y éxitos con tus blogs!
Saludos.

David dijo...

y para q en vez de una url salga un texto q habria q poner?

El Potro dijo...

Tendrías que tener el texto en un archivo HTML y subirlo a la red, es más complicado.
Si quieres poner un texto corto te recomiendo usar mejor un mensaje de alerta:
http://ciudadblogger.com/2009/02/mensaje-de-alerta-al-pasar-el-cursor.html

Saludos.

David dijo...

la idea q tengo y no se de q manera hacerla macho es poner una imagen o frase(eso ya se variaria despues) q al pincharla cargue una ventana con un parrafo

Ejemplo: un "Quienes somos" y q al pincharlo suelte la parrafada

El Potro dijo...

Entonces es como te decía, tienes que tener el texto en un documento HTML, subirlo a un hosting y en el código que menciono en este post agregar la URL de ese documento.

Saludos.

David dijo...

aunq quede como muy pardillo pero como se guarda en el documento html?

El Potro dijo...

Necesitas hacerlo con un editor de páginas web y saber subirlo a un servidor, te repito que es complicado. Seguro encontrarás algún tutorial en la red que te pueda orientar sobre cómo hacerlo; yo desconozco casi por completo el tema de los editores web.

Saludos.

a.k.a HOLiC Swan dijo...

ioo queria hacer algo con la ventana popup: osea abrir en una ventana de este tipo un menú de mapa sensible pero no sé como hacerlo.
El mapa sensible me parece util porque clickando en na zona determinada, me lleva auna sección del blog xdd
Pero no sé si se puede hacer podrian ayudarme????

El Potro dijo...

De poderse se puede, el gran trabajo es que hagas el mapa sensible, lo cual no se haría en Blogger sino en algún editor HTML. Sobre cómo hacerlo no sabría orientarte, nunca he hecho uno.

Saludos.

a.k.a HOLiC Swan dijo...

oohh el mapa sensible si sé como hacerlo (en Photoshop) xdd pero pos si no se puede no importa, supongo que buscare otras formas.
Gracias!! ^^

El Potro dijo...

Pues si sabes hacerlo y agregarle los enlaces entonces sólo sube el documento a la red y agregas la URL de ese documento en el código de esta entrada.

Saludos.

gambetagol dijo...

como seria el codigo con Scrollbars q nose como agragarlo Saludo y gracias!Exelente truco!

El Potro dijo...

Hola gambetagol,

Sólo tienes que cambiar donde dice scrollbars=0 por scrollbars=1 y también cambiar el tamaño del width y height que aparece en el primer código; ambos son para el ancho y alto de la ventana, si le pones un ancho y alto inferior al tamaño del documento entonces aparecerán los scrollbars.

Saludos.

gambetagol dijo...

Puse los 2 codigos y no se habre la ventana popup! y vi tu comentario de poner la url del documento en el primer codigo pero...entonces no me sirve para diferentes entradas ya que solo pudo poner una url?

El Potro dijo...

No, no, la URL del documento (o de la entrada) va sólo en el segundo código.
Verifica que tu navegador no tenga bloqueda la opción de ventanas pop ups, ese puede ser el motivo por el que no se abre.

Saludos.

Alex dijo...

hICE LOS PASOS PARA ABRIR UN PAGINA EN POPUP PERO NO CONSIGO QUE SE HABRA, LA PAGINA A ABRIR ESTA EN BLOGGER PERO SOLO ESTA DE UN LADO ES DECIR QUE NO USE LA PAGINA COMPLETA si acaso un lado

bueno en fin no pude colocarlo en un menu por que al darle click no sirve no funciona

http://disneyrocksmx.blogspot.com/ es aqui donde dice Radio Disney

espero me ayudes
gracias potro

El Potro dijo...

Hola Alex,

Había un error en el primer código, vuelve a pegarlo y ya deberá funcionar.

Saludos.

El Potro dijo...

No tengo idea si haya algún script que permita hacer eso, hasta donde sé las webs que lo hacen lo logran con PHP y ese sistema no es aceptado en Blogger.

Saludos.

Nelson David Veliz Zuñiga dijo...

como puedo centrar el contendio dentro del popup.... y tambien como modificarle el tamaño a cada popup individualmente hablando

espero su respuesta

El Potro dijo...

Para centrar encierra el contenido entre <center> y </center>
El tamaño se aplica para todas las ventanas, no se puede aplicar un tamaño individual por cada ventana.

Saludos.

Lesent dijo...

Hola Potro. Este tutorial esta excelente, funciona a la perfección, Pero surgió un problemita... puse un pop up que se abre automaticamente al abrir el blog, el problema es que ahora cada vez que voy a alguna categoría o post del blog (click en un link) me vuelve a aparecer el pop up, con lo que se vuelve molesto.. como lo soluciono?

El Potro dijo...

Hola Lesent,

¿Qué método usaste para que aparezca automáticamente el popup?

Lesent dijo...

Así, como le indicaste a CREATIVOZ PUBLICIDAD en el noveno comentario de esta entrada. Este es el post al que me refiero: http://ciudadblogger.com/2009/05/crear-ventanas-popup.html#comment-form

El Potro dijo...

Bien, entonces encierra ese código entre:

<b:if cond='data:blog.url == data:blog.homepageUrl'>
y
</b:if>

wilsonmix dijo...

Hola, hise todo lo que pusiste, pero yo necesito que la ventana se abra automaticamente cuandoentren ami blog sin necesidad de que le den clic como se aria ? gracias de antemano.

wilsonmix.blogspot.com

El Potro dijo...

Hola wilsonmix,

Lee el comentatio #9 ahí está la respuesta.

B &amp; B - Perfumes dijo...

Disculpa mi pregunta pero deseo saber cómo puedo hacerle para que cuando entren a mi página se abra una ventana emergente con una foto que abarque el diámetro de la mitad de la página y que después de un determinado tiempo o con un click se cierre... gracias por yu ayuda y te felicito por el excelente blog que tienes ya que he sacado muchas cosas de tu página para crear la mía... para que me puedas ayudar revisa la mía en esta dirección: http://bidomen-booh.blogspot.com/

El Potro dijo...

En el comentario #9 se explica cómo hacer para que la ventana se abra al entrar al blog.
El tamaño igual ahí lo modificas tal como se explica en el post.
Lo de que se cierre en determinado tiempo no sé, el único modo que me sé para que se cierre es el normal, dando click en el botón de cerrar de la ventana.

Publicar un comentario en la entrada

Gracias por tus comentarios. Si tienes una consulta sobre tu blog deja la dirección del mismo.

 

Ciudad Blogger. Copyright 2008 All Rights Reserved Revolution Two Church theme by Brian Gardner Converted into Blogger Template by Bloganol dot com

Ir arriba Ir abajo