Una ventana (bloque) emergente con un click | Oloblogger Continuando con la idea del splash screen que ni era splash ni era screen, el otro día nos pregunta...

3 de noviembre de 2009

Una ventana (bloque) emergente con un click

Continuando con la idea del splash screen que ni era splash ni era screen, el otro día nos preguntaban cómo hacer para que en lugar de salir automáticamente, ese aviso o lo que sea, saliera a demanda. Es decir, que saliera al pinchar en un botón o enlace y que se retirara al volver a pinchar. Prueba, prueba...


Para ello, lo primero que tenemos que hacer es insertar una función que cambiará de oculto a visible aquel bloque que nosotros identifiquemos adecuadamente. Así, antes del </head> metemos...

<style type='text/css'>
.visible { display:block; }
.invisible { display:none; }
</style>
<script type='text/JavaScript'>
function plegardesplegar(identificacion){
var menu = document.getElementById(identificacion);
if(menu.className == &quot;visible&quot;){
menu.className = &quot;invisible&quot;;
}
else{ menu.className = &quot;visible&quot;; } }
</script>

Ahora colocamos justo después del <body>, el bloque que vamos a mostrar a modo de ventana emergente, pero usando la técnica de la entrada enlazada al principio, es decir un Z-INDEX con un número grande que la muestre en la parte superior y centrado con TOP/LEFT y los MARGIN correspondientes (la mitad del ancho/alto del DIV):

<div class='invisible' id='identificativobloque' style='z-index:99;position:absolute;overflow:visible;top:50%;left:50%;width:400px;height:300px;margin-top:-150px;margin-left:-200px;border:5px solid #990000;background:#ffffff;color:#000000;'>Aquí va un texto, una imagen, un enlace, un vídeo...</div>

En cuanto a la plantilla, ya hemos terminado y podemos grabar aunque no apreciemos nada en la Vista Previa. Ahora toca colocar el enlace que hará que lo anterior sea visible y al repetir el click, vuelva a ser invisible. Podría ser por ejemplo en la barra lateral, como gadget HTML.

<a href="javascript:plegardesplegar('identificativobloque');">ENLACE DE TEXTO O IMAGEN</a>

En los dos últimos códigos insertados IDENTIFICAVOBLOQUE tiene que ser una combinación alfanumérica igual en ambos casos. Si se utilizara este sistema para plegar/desplegar otro bloque, tanto el enlace como el bloque tendrían que tener también la misma combinación alfanumérica entre sí, pero distinta necesariamente de la de otro/s bloque/s.

Opcionalmente por si nuestro bloque se tiene que abrir justo encima del enlace que serviría para volverlo a cerrar, lo cual complicaría esta acción, podemos incluir en el propio código que forma la información oculta, un segundo enlace con el mismo IDENTIFICATIVOBLOQUE, a modo de botón "cerrar" y que ya habeis podido ver en los ejemplos del principio.

<div class='invisible' id='identificativobloque' style='z-index:99;position:absolute;overflow:visible;top:50%;left:50%;width:400px;height:300px;margin-top:-150px;margin-left:-200px;border:5px solid #990000;background:#ffffff;color:#000000;'><a href="javascript:plegardesplegar('identificativobloque');" style="position:absolute;top:-20px;right:0px;line-height:10px;font-size:10px;" >[X]</a>Aquí va un texto, una imagen, un enlace, un vídeo...</div>

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir
Copy URL

Y muchos más artículos interesantes si nos sigues en...

follow us in feedly

26 comentarios :

  1. TE he tenido que quitar de widgets rss en google como uno de los blogs que leo, porque emerge esta ventana y tapa toda mi pagina de google, no dejandome ver ningun blog, lo siento.Pero informate para que lo sepas.

    ResponderEliminar
  2. Supongo que la que sale es una amarilla grande que pone una frase sobre Splash Screen. Si es eso, desaparece a los pocos segundos e incluso puedes cerrarla pinchando en ella. Me ha pasado a mí ahora mismo echando un vistazo a mi fuente directamente en FeedBurner. Es curioso esto de los feeds. Hay cosas que se interpretan y hay cosas que no. El truco de hoy también es visible desde el feed pinchando en elos enlaces. Gracias por el aviso.

    ResponderEliminar
  3. Esto es muy similar a lo que te mostré ayer en mi blog, pero sin animación, ¿verdad?.

    Un saludo.

    ResponderEliminar
  4. El resultado final es similar, pero el tuyo está más elaborado y es mucho más chulo.

    ResponderEliminar
  5. Muchas gracias. Es la solución que quería cuando te pedí esto al visualizar el Splash Screen. Es que tengo un Blog con un botón que dice Acerca de... y quería usar está solución para mostrar una pantalla emergente que exponga con texto el Acerca de ( algo parecido a lo que sale en el Adobe Reader ). Sigo con gran interés aplicando en mi Blog casi todo lo que hay publicado en el tuyo ya que los resultados finales quedan muy bien.

    ResponderEliminar
  6. Hola Oloman :)

    Me he estado fijando en tu plantilla Blogger bloc y he encontrado muy interesante ese menú que está colocado debajo del head

    ¿¿¿Cómo lo has hecho???

    Grácias

    ResponderEliminar
  7. ¿El de las pestañas a la izquierda o el de los iconos pequeños a la derecha?

    ResponderEliminar
  8. EL DE LAS PESTAÑAS A LA IZQUIERDA

    PERDON:)

    ResponderEliminar
  9. Vale Mercier. Déjame un tiempo que lo explique en un post.

    ResponderEliminar
  10. Hola Oloman, instalé este truquillo pero no funciona la pestaña de cerrar, es decir, para cerrar el bloque emergente hay que volver a hacer clíck en el texto. Agradecería tu ayuda. Puedes observarlo en el texto "suscripciones" que puse encima de las entradas en este blog: http://jeramon-jurisprudenciaactualizada.blogspot.com/

    ResponderEliminar
  11. ¿Seguro que has copiado bien el código? En tu fuente veo unas barras que no me gustan un pelo:

    href='javascript:plegardesplegar(\'identificativobloque\');'

    Creo que en lugar de una \', deberían ser un &quot;

    ResponderEliminar
  12. El que sabe, sabe, Seguro!!
    No entiendo por qué al copiar, en vez de &quot, se convertía en &apos. Tuve que corregir manualmente y listo.
    Gracias mil.

    ResponderEliminar
  13. Hola. Gran blog.
    Ando haciendo una especie de tutorial en html que contiene una imagen y esta tiene distintas secciones a su vez mediante coordenadas, que al pulsar sobre ellas remiten a otros html. La cuestión es que me gustaría que al picar sobre las diferentes secciones se abriera una ventana sin necesidad de mas html, pero no doy con ello.
    Un saludo

    ResponderEliminar
  14. Hola
    Supongo que lo haces con USEMAP, pero si quieres hacer algo más, creo que tendrás que programar más. Por si te refieres a no usar en concreto HTML, echa un vistazo a esto que está hecho sólo con CSS a ver si te sirve.

    ResponderEliminar
  15. Hola Oloman, me parece excelente este truco, pero tengo una duda como hago para colocar un codigo html de un video por ejemplo , osea quiero que en lugar del texto o foto que tienes como ejemplo aparezca el codigo html tal cual y no el video, se puede?

    saludos

    ResponderEliminar
  16. Hola Edgar.

    Sólo tienes que sustituir la parte "Aquí va un texto, una imagen, un enlace, un vídeo..." por el código HTML del vídeo.

    ResponderEliminar
  17. Hola Oloman pues ya lo hice pero me sale el video, yo quiero que salga el codigo html tal cual, se puede?
    saludos

    ResponderEliminar
  18. ¡Ah! Es que pensaba que querías mostrar el vídeo. Si lo que quieres es mostrar el código para que la gente lo copie, pásalo primero por aquí y luego lo pegas dónde te dije:
    http://nosetup.org/php_on_line/convertir_html_texto

    ResponderEliminar
  19. muchas gracias Oloman era precisamente eso que quería.

    saludos y adelante con este excelente blog

    ResponderEliminar
  20. No hay mucho que enteder. Sólo prueba los dos primeros botones/enlaces para ver en qué consiste el truco y luego, si te gusta, copia el código que se ofrece y pégalo. Posteriormente podrás cambiarlo a tu antojo releyendo el post.

    ResponderEliminar
  21. Me encanta tu blog pero me estoy volviendo loca, como inserto un video de youtube para que salga en la ventana emergente? Muchas Gracias

    ResponderEliminar
  22. Miriam, en el código que transcribo en la entrada, hay que cambiar

    Aquí va un texto, una imagen, un enlace, un vídeo...

    por el código que te ofrece YouTube, ese que lleva un iframe.

    ResponderEliminar
  23. Gracias por la respuesta pero sigo teniendo problemas jeje Definitivamente soy una inutil. Creo que he intentado con todos los códigos que me da youtube, ahora he puesto de nuevo la que me has indicado en la respueta pero al dar a guardar la plantilla me dice exactamente esto:

    No se ha podido analizar su plantilla, porque no está bien formada. Asegúrese de que todos los elementos XML se han cerrado correctamente.
    Mensaje de error de XML: Attribute name "allowfullscreen" associated with an element type "iframe" must be followed by the ' = ' character.

    Muchas Gracias de nuevo y a ver si lo consigo por fin!mua

    ResponderEliminar
  24. Miriam, eso que me comentas es que o estás tomando mal el código o lo que creo más posible y que te explico ahora.

    Cuando insertas código en la plantilla (en gadgets o entradas no hay problema), Blogger es muy puñetero y no entiende los códigos normales. De esta manera, tienes que sustituir las comillas simples (') por dobles ("), las dobles (") por &quot y los & por &amp;

    Prueba con eso.

    ResponderEliminar