53

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

Entradas Relacionadas:

53 comentarios:


Xkalibur

muchisimas gracias por tu blog, se nota que detras lleva mucho trabajo. te lo agradezco pork gracias a ti le he pegado un cambio radical a mi blog xD
Saludos y mil gracias

Anónimo

xcalibur, las gracias he de dártelas yo, por mostrar aquí tu agradecimiento tomándote la molestia de comentar además!
¡Un abrazo!

Sebastian

muy bueno el post, hace unos dias andaba necesitando algo asi! grax rosa!, te hago una pregunta que ya te hice 2 veces, con esta ya es la tercera,jaja :p , queria saber si yo te pido que agregues mi blog al tuyo, si lo harias!
Aunq no te conozca te quiero mucho, se nota la buena persona que sos a simple vista! un abrazo desde Argentina!

Anónimo

Seba, perdona, si había leído tu pregunta las otras dos veces, lo siento, se me pasó contestar...
Me alegro que no te hayas enfadado.

Mira no suelo colocar links a los blogs porque me lo pidan, normalmente lo hago porque los blogs me gustan, o la persona me cae bien, porque la he ayudao y se que me visita mucho, en fin...por cosas de ese tipo.

De todos modos, veo que tu eres asiduo, ya que dejas comentarios además y eso me gusta, te enlazaré con gusto, eso si, antes he de ver tu blog, porque no tienes tu perfil habilitado y no he podido verlo...y,la verdad, no me acuerdo si lo he visitado alguna vez.

Necesito saber de que trata, ya sabes, que no sea nada "fuerte" ni esas cosas...ya me entiendes...

¡Un saludo!

Sebastian

como me voy a enfadar Rosa, con todo lo que me ayudaste, y no tenes idea de lo valioso que es para mi que pongas el link de mi blog en el tuyo, es algo muy especial! gracias de todo corazon!
Nunca viste mi blog! asi que te lo paso, de igual manera te cuento que no tiene cosas "fuertes", solo es para entretenimiento, no te aburro mas y te paso el link! http://sarguet.blogspot.com
espero que te guste! aunq bueno es bien de novato! jejeje, 15 años tengo! pero gracias a tu blog hasta un chico de 6 años se puede crear el suyo, jajaja! Mi hermana es argentina y se fue a vivir alli, asi que capaz se crucen algun dia :p
un beso y segui asi con tus hermosos post!

Unknown

Interesante el script, parece que me va a ser útil para hacer algunas cosillas :D

Por cierto Rosa debería publicar algún template, creo que varios lo usarían. Salu2

Sebastian

Rosa disculpame que sea tan molesto, no aguanto un segundo sin escribir, jeje, pero en este caso vine a hacerte otra pregunta pero de ayuda!, como hago para tener unos iconos(botones) a la izquierda o a la derecha(no importa el lugar), como los que tenes vos, capaz que ya estaba publicada la forma de hacerlo, pero si estaba no la vi!
Espero tu respuesta...no molesto mas! eso creo! un saludo

Unknown

Seba lo que buscas Rosa ya lo publicó y esta en este post
Menu flotante del escaparate
Salu2

Anónimo

Interesante tu blog Rosa. Veo muchos consejos que pueden venir bien a los novatillos. Saludos.

Tranquilita

Querida Rosa:

No puedo ver los iconos de Edición Rápida en mis posts, a pesar de que en la configuración básica del blog está seleccionado "Sí" a "Mostrar Edición Rápida en su Blog".

¿Sabes a qué se debe eso y cómo puedo corregirlo? Para mí es muy útil acceder a la edición desde la página principal del blog.

Saludos desde México.

Tranquilita
quilling4me@gmail.com

Anónimo

Tranquilita, si no has modificado nada en tu plantilla, supongo que será un fallo momentáneo de Blogger...

Supongo que estarías conectada en tu panel ¿no? Ya sabes que si no lo estás, cuando accedes a tu blog desde tu navegador, los iconos de edición no se ven...

Anónimo

Public, gracias!

Scrap Stuff

Así es, siempre que entro a mis blogs procuro hacerlo desde mi panel. Voy a esperar un poco a ver si Blogger se restablece. ¡Gracias!

(Tranquilita)

Jabba

Hola Rosa!

Busco tu implacable y valiosa ayuda de nuevo.

Te cuento; los iconos de abajo de los posts que tengo para ir a las entradas mas antiguas, a las entradas recientes o a la página principal, no se por qué motivo se me agrupan todos a la izquierda de vez en cuando (por no decir casi siempre) como si estuvieran con alineación izquierda.

Y eso me ha pasado de la noche a la mañana, porque no recuerdo haber tocado nada del HTML de la plantilla que pudiera originar ésto.

Los he cambiado por texto, pero nada, no hay manera, me sigue pasando lo mismo.

Un monumento te tenían que hacer ;). Muchas gracias.

Un saludo

Anónimo

Te contesto por tu blog,como volvi a quitar el cbox que me hace tiritar...manias mias.
Y por ello te digo, que como vuelvas a salir ganadora al mes que viene, te regalare una manada de osos...
Al menos...digo!!

Dile a tus chicos que no te traicionen mas anda!!, y si quieres te doy mi gran permiso))) para quitarme el link de mi blog.........

Un besote fuerte Rosita

Posd: con esta oportunidad se me olvidaba decirte: lindo header le hiciste a Key ya podias decirnos como los haces tambien, no todo es codigo y codigo...andaaa maestra, enrollate un poco !!!!jeje por fii

Otro beso hala!!!

Anónimo

Jabba, pon en el css de la plantilla, ya sabes, antes de ]]></b:skin> estas líneas de código, he visto que te faltan, si antes se veían bien los iconos o las letras, creo que de alguna forma te las has "cargado":

#blog-pager-older-link {
float: right;
}

#blog-pager-newer-link {
float: left;
}
#blog-pager {
text-align: center;
}

Anónimo

Yoli, XD, no te habrás creído lo de quitar el link...de eso nada, con permiso ni sin el, estaría bueno...
Me alegro que te visiten y me encanta el osito, je,je.

Un abrazo ¡de osote!

Jabba

Solucionado

A ti lo que te pasa es que eres es una artista. Ole, ole y ole ;).

Muchas gracias Rosa.

fracerone

Pero como aplicarlo a una imagen en la sidebar?

Anónimo

fracerone, da igual que sea en un post que en la sidebar, se aplica como explico en la entrada para los dos lugares por igual.

Anónimo

Hola Rosa.
Buscando ayuda para mi blog he llegado a tu magnífico blog. Eres una auténtica experta.
Quisiera hacerte una pregunta sobre esta entrada que explica cómo poner un popup en el blog.
Yo lo que quiero es pinchar sobre una imagen (portada de un libro) y que aparezca un popup donde pueda explicar brevemente de qué va el libro y aconsejar su lectura como medio de animación lectora (la explicación la puedo poner en una página web aparte. Esto lo puedo hacer pinchando en un texto, pero no lo he conseguido pinchando en una IMAGEN. ¿Podrías ayudarme? Te lo agradecería enormemente.
Gracias por tu blog de ayuda. Eres magnífica.
Un saludo desde España.

Anónimo

Diego, para usar una imagen como link del popup sustituye en el código donde dice "TEXTO_DEL_LINK" por esto:

<img src="Aqui_la_url_de_la_imagen"/>

Anónimo

Hola Rosa.
Esto era lo que estaba buscando. Ahora me funciona perfectamente. Estoy a tu disposición para cualquier cosa en que pueda ayudarte.
He conseguido tanto gracias a personas tan altruistas como tú que intentaré devolver lo recibido con la ayuda que necesiten los demás.
Mil gracias. Un saludo desde Málaga.

Anónimo

Diego, no lo hago para recibir nada a cambio, pero igualmente gracias, lo tendré en cuenta ;-)

El Pespunte

Hola me gustaría saber cómo puedo poner una ventana popup que aparezca de forma automática al abrir mi blog.

Un saludo

Anónimo

El pespunte...¿algo así?

internet

hola oye amigita ayudame ps la ultima parte no la entendi donde coloco la ultima parte ayudame, te e escrivto y nunca contestas pareces fantasma. o es que kizas no aceptas mi comentario,,,,

Anónimo

Eskan, está bien claro, se coloca donde vayas a poner el enlace para que al pinchar se abra la ventana popup, en una entrada, en la sidebar o donde sea...

Por cierto, existo y respondo a los comentarios, no soy ningún fantasma, podría decirse que tu lo eres más que yo, pues ni veo tu perfil de Blogger ni un enlace a tu blog...tal vez sea por eso que en alguna ocasión no te contesté, no suelo hacerlo si no hay blog a la vista.

Redacción El Zuliano

DISCULPA ROSA PODRÍAS DECIRME DONDE VA EL CÓDIGO QUE APARECE EN EL SEGUNDO PASO POR FAVOR

ESPERO TU RESPUESTA

TENGO TIEMPO VISITANDO TU BLOG PERO ES LA PRIMERA VEZ QUE ESCRIBO

MI PAGINA ES GAITA-ZULIANA.BLOGSPOT.COM

Anónimo

Gaita Zuliana , el segundo código es el que colocas en el enlace que al pinchar hace que se abra la ventana, puede ser un enlace de texto o de imagen y puede ir colocado en una entrada, en la sidebar o donde lo necesites.

Max

HOLA ANTES QUE NADA GRACIAS TU BLOG ME A SERVIDO DE MUCHO PERO TENGO UNA DUDA GRANDISIMA KIERO PONER DE VIENVENIDA UNA BENTANA "POPUP" UN DOCUMENTO HTML KISIERA SABER SI SE PUEDE Y SI ES QUE SE PUEDE PORFA ME PASARAR EL CODIGO PARA PONERSELO A MI PLANTILLA

DE ANTE MANO GRACIAS


AKA TE DJEO MI BLOG POR SI LAS DUDAS

http://maxkratos.blogspot.com/

Anónimo

MAX, mira si esto te sirve:
http://elescaparatederosa.blogspot.com/2007/08/ventana-con-mensaje-de-bienvenida.html

Unknown

Hola Rosa, es primera vez que escribo pero llevo algun rato visitando tu blog y aprendiendo de tanatas excelentes y utiles herramientas que ofreces. Sin desperdicio alguno, que suerte para mi haberte encontrado. Exitos!!!

test

Rosa sera que existe algun pop pup para blogger que al entrar a la web te salga una imagen invitandote hacer click en su link para registrarte en un foro?
si lo hay te lo agradeceria un monton :)

Anónimo

carlos Pues tal como lo dices, con enlace, ahora mismo no se ninguna forma de hacerlo con un pop up :(

Alexis Moya

rosa, en mi blog tengo una ventana de chat de Meebo. Puedo poner eso en un pop up??? ayudame. gracias

Anónimo

Klgo. Alexis Moya R. No lo se exactamente...pero si se puede, sería tal como explico aquí, incluyendo en el enlace la url del chat.

-¦-= Shadow†Sneak =-¦-

Gracias me sirvió mucho este hack, para adaptarlos a las imágenes de entrada.

saludos.

Nacho

Holap,

Sabes si se podría hacer eso con un reproductor de musica similar al Dew Player? La idea es sacarlo fuera del blog... Gracias

Anónimo

NachoQuizá dices algo así:
http://oloblogger.blogspot.com/2008/04/musica-en-tu-blog-una-solucin-flexible.html

Nacho

Gracias Rosa, pero no exáctamente. La idea esss... como decirlo, obtener de alguna forma un gadget extraíble (o emergente), de manera que pueda sacar el reproductor fuera del blog... no sé si me explico.

Anónimo

Nacho Pues no tengo idea de nada así.. lo siento.

Nacho

Gracias de todos modos, seguiré investigando. Creo que utilizaré la url de un blog nuevo y en blanco.

un saludo

Nacho

Lo tengo "medio"-solucionado

Pero, ¿y si no queremos que no recuadre el centro de la que queremos que aparezca?

Anónimo

Nacho Una ventana emergente o popup es tal como lo ves... quizá estás buscando otra cosa y no sabes exactamente que o como hacerlo... pero así es como se muestra un popup.

Nacho

Solucionado!
http://www.mus-it.com/
Gracias por la ayuda!

Nacho

Finalmente lo que hice fue colocar el reproductor en un blog nuevo a través de un gadget html del propio reproductor, y lo ajusté justo donde me aparecía el pop-up. Menudo lío.

Es un buen post, por si te animas.

Anónimo

Nacho No se si llegaste a probar el efecto de Oloblogger... pero es lo mismo con mucho menos trabajo...

Nacho

Hola,

Sí que lo leí, pero me limitaba de dos formas:

- quería que el pop-up contuviese sólo el reproductor y...
- que no estuviese en mi misma página.

Ahora sólo tengo que eliminar la barra de navegación de firefox. Gracias!.

vondav

Gracias por este recurso Rosa, pense no me funcionaria para hacer pop-up dos elementos HTML que tenia en la sidebar, pero finalmente consegui lo que buscaba, que la reproducción del player no se detenga cuando el usuario pase a otras páginas. Gracias ¡ y felicitaciones por tu blog y el tiempo que dedicas a compartir tus conocimientos e investigaciones.

Anónimo

vondavMe alegro te sirviera. :D

Tresi

Hola Rosa!! ya llevo un tiempo visitando tu blog en busca de ideas nuevas para incorporar al mío. No te había comentado nunca y como eso no está bien te dejo mi primer y seguro que no último comentario!!! ;)
Yo estoy buscando como hacer el efecto que aparece en este blog: http://elblogdefreud.blogspot.com/ donde aparece en la parte inferior izquierda una imagen que aunque te desplaces con el scroll derecho ésta no se mueve...no sé si me explico...Y la verdad que no sé ni como se llama este efecto..jeje
Te agradezco de antemano tu atención y felicitarte por tu blog y tu dedicación.

PD. Acabo de incorporar en mi blog (http://historias2-0.blogspot.com/)el mensaje de bienvenida que sugieres en otra entrada!! Muy bueno!!

Anónimo

TresiEsto te servirá:
http://elescaparatederosa.blogspot.com/2007/03/imagen-flotante-en-blogger.html

Publicar un comentario

Si vas a dejar una consulta, procura tener habilitado tu perfil en Blogger o deja la url del blog a revisar (no enlace).

Los comentarios están siendo moderados.

:) :(( :( :P :D :$ ;) :I :X :O |O :S