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...
.visible { display:block; }
.invisible { display:none; }
</style>
<script type='text/JavaScript'>
function plegardesplegar(identificacion){
var menu = document.getElementById(identificacion);
if(menu.className == "visible"){
menu.className = "invisible";
}
else{ menu.className = "visible"; } }
</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):
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.
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.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut nulla leo, facilisis non euismod elementum, hendrerit at velit. Maecenas vitae justo vel mauris dignissim pellentesque sed et diam. Etiam dui quam, posuere ut egestas vitae, dapibus id felis. Donec egestas faucibus purus, a bibendum enim feugiat quis. Sed pellentesque orci porta urna tincidunt nec commodo mauris semper. Suspendisse at quam mattis velit commodo sollicitudin id a ante. Maecenas quis libero tortor, vel accumsan erat. Nullam sit amet enim in arcu tristique euismod.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed elementum arcu justo, sed tincidunt lacus. Fusce lorem risus, accumsan vel commodo at, tempus a justo.
NINGUN DERECHO RESERVADO
9 comentarios:
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.
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.
Esto es muy similar a lo que te mostré ayer en mi blog, pero sin animación, ¿verdad?.
Un saludo.
El resultado final es similar, pero el tuyo está más elaborado y es mucho más chulo.
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.
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
¿El de las pestañas a la izquierda o el de los iconos pequeños a la derecha?
EL DE LAS PESTAÑAS A LA IZQUIERDA
PERDON:)
Vale Mercier. Déjame un tiempo que lo explique en un post.
PUBLICAR UN COMENTARIO