Simular una venta modal | Oloblogger En su momento vimos como construir un bloque emergente que se solapaba al contenido de nuestra pági...

15 de diciembre de 2009

Simular una venta modal

En su momento vimos como construir un bloque emergente que se solapaba al contenido de nuestra página y que funcionaba al estilo de las ventanas modales que se usan -sobre todo- para las galerías de imágenes. Splash screen llamamos al invento, aunque no con mucha fortuna, todo hay que decirlo.

Para que el efecto fuera más parecido a las susodichas ventanas modales, sólo nos faltaba conseguir que todo el contenido de la página excepto el propio bloque emergente, atenuara su color a la manera que ocurre con Lightwindows, Lytebox y todos estos.

Pues a través de un sistema de capas solapadas, vamos a simular algo parecido. De esta manera, si sólo vamos a necesitar este efecto para usarlo de forma esporádica, nos podemos ahorrar instalar el script, así como la demora que produce su carga para todas las páginas.

Partiendo de la pestaña vertical que vimos el otro día, a la izquierda podeis pinchar para ver un ejemplo del resultado. Si os gusta, a continuación teneis la explicación de cómo montar el código y al final el código completo para poder copiar y pegar.

(1) En primer lugar creamos el pequeño script que muestra/esconde elementos. Esto también se explicó anteriormente y si ya lo instalasteis, no será necesario hacerlo otra vez.

1
<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 == "visible"){menu.className = "invisible";}else{ menu.className = "visible";} }</script>


(2) Después, creamos la pestaña con el enlace. En esta ocasión el enlace tiene que ser la llamada al script anterior y que permite por un lado visualizar/esconder una capa de color negro semitransparente y por el otro visualizar/esconder un bloque de información. Como lo de la pestaña ya lo vimos anteriormente, simplemente marcamos en verde la forma de hacer estas llamadas.

2
<style type="text/css">
#contenedorizda {
position:fixed;
top:25%;left:0px;
width:38px;height:102px;
background:url(http://3.bp.blogspot.com/_0eC4K-qZ7AM/Sxvva1xqibI/AAAAAAAAK0E/iaMzC5O-0cM/s200/ejemplo.jpg) no-repeat transparent -4px 0px;
z-index:10;
}
</style>
<a href="javascript:plegardesplegar('idatenuar');javascript:plegardesplegar('idbloque');">
<div id="contenedorizda" onmouseover="this.style.backgroundPosition='0px 0px';" onmouseout="this.style.backgroundPosition='-4px 0px';"></div>
</a>


(3) Por último, creamos las capas con la clase .invisible para que inialmente no se vean. Importante añadirle a cada una, el mismo id que pusimos en la llamada del script explicada en primer lugar de esta entrada: idatenuar e idbloque.

La primera capa (idatenuar) formará la atenuación del contenido de la página. Para ello se posiciona de forma fija, se le hace ocupar el 100% del alto/ancho de la página y además se le añade una transparencia (80% en el ejemplo). Con el z-index:99 conseguimos que la capa negra semitransparente se quede por encima de la página.

3
<div class="invisible" id="idatenuar" style="z-index:99; position:fixed; top:0px; left:0px; overflow:visible; height:100%; width:100%; background:#000000; -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80); filter:alpha(opacity=80); -moz-opacity:0.8; opacity: 0.8; -khtml-opacity: 0.8;"></div>


(4) Ahora haremos una segunda capa (idbloque) que ocultamos también con la clase invisible, que se fijará de la misma manera, pero que ocupará un espacio menor (400x300 px en el ejemplo). Habrá que colocarle un z-index superior al de la anterior capa para que se quede por encima. Dentro de ella, además del contenido que queremos mostrar, insertamos un DIV con una X que incluye enlace al javascript creado al principio y que nos permitirá cerrar tanto la anteriormente creada capa negra (idatenuar) como la que vamos a crear ahora(div id="idbloque").

4
<div class="invisible" id="idbloque" style="position:fixed; overflow:visible; top:50%; left:50%; width:400px; height:300px; margin-top:-150px; margin-left:-200px; border:5px solid #990000; background:#ffffff; color:#000000; padding:20px; text-align:center; z-index:100;">

<div style="position:absolute;top:-25px;right:0px;background:#ffffff;color:#000000;padding:1px;">
<a href="javascript:plegardesplegar('idatenuar');javascript:plegardesplegar('idbloque');">[X]</a>
</div>

AQUI EL CONTENIDO DE LA VENTANA
</div>


Un esquema por si no se ha entendido muy bien:

idatenuar: capa de color negro con transparencia
idbloque: contenido a mostrar en ventana emergente

1.
- Estilo script con función plegardesplegar
- Script con funcion plegardesplegar

2.
- Estilo pestaña
- Pestaña con enlace a función plegardesplegar, bloques idatenuar e idbloque

3.
- Capa negra semitransparente intermedia que ocupa todo el espacio disponible

4.
- Capa con el contenido a mostrar
- Anidada dentro de esta capa, otra con un enlace a la función plegardesplegar y que permite cerrar la ventana

Click aquí para poder copiar todo el código junto [+/-]
(comillas dobles y simples sustituidas por ' y &quot; respectivamente
para que funcione bien dentro de la plantilla Blogger)


<style type='text/css'>#contenedorizda {position:fixed;top:25%;left:0px;width:38px;height:102px;background:url(http://3.bp.blogspot.com/_0eC4K-qZ7AM/Sxvva1xqibI/AAAAAAAAK0E/iaMzC5O-0cM/s200/ejemplo.jpg) no-repeat transparent -4px 0px;z-index:10;}</style><a href='javascript:plegardesplegar(&quot;idbloqueoculto&quot;);javascript:plegardesplegar(&quot;idcerrarbloque&quot;);'><div id='contenedorizda' onmouseover='this.style.backgroundPosition=&quot;0px 0px&quot;;' onmouseout='this.style.backgroundPosition=&quot;-4px 0px&quot;;'></div></a>
<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 == 'visible'){menu.className = 'invisible';}else{ menu.className = 'visible';} }</script>
<div class='invisible' id='idbloqueoculto' style='background: rgb(0, 0, 0) none repeat scroll 0% 0%; overflow: visible; z-index: 99; position: fixed; top: 0px; left: 0px; height: 100%; width: 100%; -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80); filter:alpha(opacity=80); -moz-opacity:0.8; opacity: 0.8; -khtml-opacity: 0.8;'></div>
<div class='invisible' id='idcerrarbloque' style='border: 5px solid rgb(153, 0, 0); padding: 20px; background: rgb(255, 255, 255) none repeat scroll 0% 0%; overflow: visible; position: fixed; top: 50%; left: 50%; width: 400px; height: 300px; margin-top: -150px; margin-left: -200px; color: rgb(0, 0, 0); text-align: center; z-index: 100;'><div style='padding: 1px; background: rgb(255, 255, 255) none repeat scroll 0% 0%; position: absolute; top: -25px; right: 0px; color: rgb(0, 0, 0);'><a href='javascript:plegardesplegar(&quot;idbloqueoculto&quot;);javascript:plegardesplegar(&quot;idcerrarbloque&quot;);'>[X]</a></div>Como todo esto está dentro de un DIV, aquí podeis poner lo que gusteis: un texto, una imagen, un enlace, un vídeo, un formulario...</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

82 comentarios :

  1. Oye amigo como puedo quitarle este simulador de ventana modal de mi pagina de Google, porque no encuentro la manera de hacerlo y me tiene bloqueada la pagina de busqueda...

    :( :( :s

    ResponderEliminar
  2. No me atrevo yo a tanto.
    Saludos

    ResponderEliminar
  3. Amigo Oloman,

    Si observas mi blog, verás que en el pie de la pantalla se me ha instalado una especie de barra en la que hay botones para

    G: search – Translate – Games – Statistics – Share

    La verdad es que yo no he hecho nada raro en el blog y no sé cómo se ha instalado. Es pura curiosidad, porque no me molesta e incluso tiene su utilidad, pero tengo cierto interés en saber cómo coño ha pasado eso, más que nada, para saber más cosas.

    Si tienes alguna idea de lo que ha podido pasar, te agradecería que me lo dijeras.

    Te doy las gracias más efusivas por las indicaciones que me diste sobre el espacio disponible en el blog, en los comentarios a TECHNORATI. Yo, que llevo un año con el blog, tengo utilizado el 17% sólo, lo que me permite continuar por mucho tiempo escribiendo mis divagaciones y mis neuras.

    Un cordial saludo,

    Antonio

    ResponderEliminar
  4. Increíble truquito, Oloman!! pongo la página en favoritos para hacerlo en cto tenga tiempo, me encantó! creo q tiene montones de aplicaciones. Gracias Oloman!
    Un abrazo

    ResponderEliminar
  5. Anónimo, se quita eliminando el mismo código que se añade para ponerla.

    Joselop44, si no lo necesitas, tampoco tienes por qué arriesgar, pero no es difícil... en serio.

    Antonio, eso es una barra Wibiya. La forma de instalarla se explica en esta entrada. Lo que más me sorprende es que digas que no has hecho nada. Este tipo de cosas no aparecen solas... hasta la fecha.

    Luz, es cuestión de echarle imaginación. Creo que la inclusión de un background hecho con imagen en lugar de color plano, daría lugar a versiones muy molonas, tanto en la capa para atenuar como en la del mensaje.

    ResponderEliminar
  6. Amigo Oloman,

    Muchas gracias por la información. Veo que el código es

    script src="http://toolbar.wibiya.com/toolbarLoader.php?toolbarId=XXXXX" type="text/javascript"

    y no lo encuentro por ningún lugar de la plantilla. Ya he aprendido cómo se instala una nueva, gracias a ti, pero me interesaría borrar ésta porque, como está, no me gusta.

    ¿Me podrías decir dónde encuentro los códigos para borrarla, porque no veo ningún gadget que los contenga y tampoco están en la plantilla.

    Muchísimas gracias.

    Antonio


    No he puesto los signos que abren y cierran los códigos, porque en Comentarios no me los admite el sistema.

    ResponderEliminar
  7. Yo también miré y no ví el código, pero tenía la esperanza de que lo encontraras metido no en la plantilla, sino en algún gadget. Ya veo que no.

    Quizás el código que facilita el servicio ahora es otro, porque la realidad es que la barra ESTÁ AHÍ. Alguna idea debes de tener, de cómo fue a parar a tu blog y eso sería un comienzo. Algún cambio has debido realizar que si no directamente, sí indirectamente te ha metido eso.

    ¿Un fenómeno paranormal?
    "A veces veo muertos...". El sexto sentido.

    ResponderEliminar
  8. Ok Oloman no importa, igualmente no espero que tengan permanentemente el premio, y una cosa mas referente a una auyda, e querido hacer un efecto como el que le pusiste a el premio en muchas cosas pero no se como e igual esta en este blog http://tecno-compu.blogspot.com/ en el logo de twitter y feed, me podras guiar o decir como hacerlo espero tu respuesta :D:D

    ResponderEliminar
  9. O cualquier efecto que pueda hacer de ese tipo, tambien lo tienes incluido en tu cabecera donde dice "Oloblogger" ahi te vuelvo a decir que me digas como porfavor saludos :D:D

    ResponderEliminar
  10. Amigo Oloman,

    Lo único que he hecho es instalar una impresora HP que me compré hace unos días. Igualmente la instalación de la impresora llevaba algún artilugio, pero lo que no entiendo es cómo ese artilugio se ha ido a parar directamente al blog. Lo que te puedo asegurar es que yo no he hecho absolutamente nada en la plantilla del blog. Bueno, no te comas el coco, que eso tampoco tiene tanta importancia.

    Muchísimas gracias por todo y un fuerte abrazo de agradecimiento,

    Antonio

    PS:Olonam, eres cojonudo

    ResponderEliminar
  11. Amigo Oloman,

    Esto ya sí que es la leche y la hostia. Tú habías visto el blog hace unas horas y la maldita barrita Wibiya. Sin que yo haya hecho absolutamente nada en el blog, pero nada de nada, la barrita ha desaparecido. Esto ya sí que no hay dios que lo entienda. A ver si eres capaz de encontrar una explicación, porque yo ya comienzo a creer en los extraterrestres. Bueno, bienvenida sea la desaparición, lo mismo que maldita fue la instalación de la barrita en cuestión.

    Buenas noches y que descanses.

    Un cordial saludo,

    Antonio

    ResponderEliminar
  12. Mike, aquí tienes algo sencillo y aquí otra explicación más completa.

    Antonio, lo cierto es que si no lo hubiera visto, pensaría que venías de una comida navideña con unas copas de más, pero como lo he visto... o Blogger está introduciendo código experimental o alguien tiene tus contraseñas y también está experimentando.

    La Navaja de Occam me dice que será lo segundo, porque si bien es normal que Blogger meta código extra, parece raro que lo ponga y lo quite a las horas.

    ResponderEliminar
  13. Gracias oloman saludos de nuevos y que sigas pasandotela bien :D

    ResponderEliminar
  14. Esta lindo.

    Sabes yo quiero que el fondo no sea trasparente sino todo negro...Como hago? que valor modifico?

    ResponderEliminar
  15. Mmmm, está un poco complicado aunque no dudo que esté perfecto, solo te pido que recuerdes, je, je, je, (ya hasta reclamo como en ventanilla de servicio al cliente), que hiciste dos post la otra vez con esta temática, uno para ventanas que se abrian a voluntad con un click y otro donde ponías el verdadero splash screen con temporizador para iniciar y terminar la carga automáticamente, es en este último truco por el cual tengo mucho interés, puedes ver tu versión inicial en mi blog que trata sobre la política de mi ciudad:

    http://www.laplegariadeunpagano.com/

    Si a eso le puedo agregar la simulación de ventana modal, puta... sería lo máximo.

    ResponderEliminar
  16. Amigo Oloman,

    Muchas gracias por las molestias que te has tomado en solucionarme el problema. También gracias a La Navaja de Occam. La verdad, en este caso, me has hecho un gran favor, porque yo pienso lo mismo que tú. Aquí, en mi blog, algún desgraciado, o algún cabronazo, para ser más exacto, ha metido las narices haciéndose con mi contraseña. Ahora ya sé donde va a meter sus narices: en algún lugar pestilente de la anatomía de alguna familiar suya, cuanto más próxima mejor.

    La verdad es que la contraseña que tenía, que la puse cuando creé la cuenta de Google, hace ya un montón de años, era muy simple, y la pregunta para recuperarla era totalmente transparente y fácil. Vamos, que no tiene ningún mérito para el pirata que sea haberse hecho con mi contraseña.

    ¡Menos mal que el cabrón en cuestión no ha hecho ninguna otra cosa! Si ahora intenta entrar en mi blog, se va a comer una mierda seca como Comida de Navidad, porque he puesto una contraseña que no hay dios que sea capaz de recuperarla.

    Te hago patente, otra vez, mi admiración por tus conocimientos y tu generosidad y TE DESEO UNAS FELICES NAVIDADES Y FIESTAS, Y, SI PUEDE SER, QUE TE TOQUE EL SEGUNDO PREMIO DE LA LOTERÍA, PORQUE EL PRIMERO ME VA A TOCAR A MÍ, Y NO CREO QUE LLEVEMOS EL MISMO NÚMERO, AUNQUE YA ME GUSTARÍA.

    Te envío un cordial y afectuoso saludo,

    Antonio Martín Ortiz

    ResponderEliminar
  17. Oloman:
    Muchas gracias por todo, todo o que instalo me funciona muy bien, pero tengo una pregunta:
    ¿Cómo cambio el titulo "Ejemplo"?
    Gracias

    ResponderEliminar
  18. ¿Un fenómeno paranormal?
    "A veces veo muertos...". El sexto sentido.
    --------------------------------------------
    Yo diria que la frase era "En ocasiones veo muertos...."¿No?.
    Gracias por todo Oloman y un saludo

    ResponderEliminar
  19. Luckitas, para un negro opaco tendrías que quitar en el código (3) todo esto:
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80); filter:alpha(opacity=80); -moz-opacity:0.8; opacity: 0.8; -khtml-opacity: 0.8;

    Victor, a ver si lo puedo contar breve. Al script con el temporizador del "splash" (el primero del post), le añades una segunda línea idéntica a la que hay. Cambias un ID_CAPA por "idatenuar" y el otro por "idbloque". En este caso, le tienes que añadir un punto y coma después de cada ...10000); Todo esto lo colocas antes del /head.
    Ahora antes del /body, colocas sólo los códigos 3 y 4 de este post, y del 4 quitas las líneas 6 a 10, ambas inclusive. Con eso ya funciona como tú quieres.

    Antonio, sigue pareciéndome raro, pero si ya está solucionado, perfecto. No te enfades -lo pareces- y disfruta.

    Miten, no es un título, es todo una imagen. Todavía no sé escribir en vertical :). Tendrás que rediseñarla imagen a tu gusto y sustituir la dirección por la tuya.

    Gildo, es muy posible que sea como tú dices, porque precisamente la buena memoria no es una de mis virtudes.

    Felices Fiestas a todos.

    ResponderEliminar
  20. Hola Oloman!

    Sabes que un usuario me ha dicho que no puede acceder al escritorio de su ciuenta.

    Sabes de ese problema y por que se ha generado?

    Gracias y que tengas un estupendo día!

    ResponderEliminar
  21. No Karla. Ese tipo de cosas suelen ser imprevisibles y nunca se conocen todas las causas hasta que realmente lo solucionan.

    ResponderEliminar
  22. Hey Oloman,

    La verdad es que no es ninguna consulta, sólo agradecerte personalmente algún truquito que usé... ya viste el link, aunque sinceramente el html no es lo mio ;o)

    Saludos!

    ResponderEliminar
  23. hey gracias! ya lo puse...quedó de 10!!! ja

    Un abrazo!!!!!!

    ResponderEliminar
  24. Hola oloman necesito tu ayuda urgente !

    en mi blog que estoy creando todo ando bien, pero acabo de probarlo con Internet explorer y veo el fondo color Blanco!, cuando en realidad debe ser un color negro, porque en mozilla lo veo color negro como lo puse.

    Porque en IE lo veo blanco o me falta poner algun codigo?
    xfabor ayudame =(

    ResponderEliminar
  25. disculpa me olvide el link
    http://pruebafechas1.blogspot.com

    ResponderEliminar
  26. instale notepad chaos a mi blog y por defecto a tenido 3 widgets a la derecha, el primero es de entradas recientes el segundo etiquetas y el ultimo para utilizar links.

    El problema esque no puedo cambiar el primer widget de la derecha porque entradas recientes al poner editar o borrar ya no me permite poner otro widget, y etiquetas que esta abajo quiero subirlo y no se como te agradeceria tu ayuda.

    saludos y felicidades por el premio .

    ResponderEliminar
  27. Muy buena la informacion! me costo mucho pero si se lee paso por paso atentamente se puede lograr!
    gracias por el post..
    un saludo!

    ResponderEliminar
  28. Renzo, esta línea (casi al principio)
    background: url('http://img44.imageshack.us/img44/3188/83379481.png')repeat;
    cámbiala por esta otra
    background:url(http://img44.imageshack.us/img44/3188/83379481.png) #1d1d1d;
    Resulta que los PNG con transparencia le sientan mal a IE y pienso que puede ser eso.

    Anónimo, no me acuerdo muy bien, pero puede que esa sección tenga un locked:true y/o un showaddelement:no. Si tienes alguno de estos lo cambias respectivamente por false y yes.

    Marketing Internet, se trata precisamente de leer. Si no lo haces o lo haces sin entender, las explicaciones sirven de poco :)

    ResponderEliminar
  29. Quisiera tener el total de comentarios de cada entrada así como en tu blog y llevarlo a la parte superior, pero yo tengo una imagen de un foco y quiero centrarlo ahí como podría hacerlo?

    ResponderEliminar
  30. Eso depende de tu plantilla, pero en un principio tienes que colocar el código que muestra el número de comentarios dentro del DIV que forme ese foco y luego configurar el estilo de los comentarios con una clase para ubicarlo con POSITION.

    ResponderEliminar
  31. mi plantilla es una notepad chaos, ya arregle el problema de la fecha que no figuraba, tambien cambie la imagen por la del foco que te menciono pero nose como poner el total de comentarios centrado en el foco.

    Ya lei los links que dejaste pero no me es facil entenderlo bien porfavor ayudame.

    ResponderEliminar
  32. Pues si en un post entero no he sido capaz de explicarlo para que se entienda, ¿cómo voy a hacerlo en un espacio tan breve como un comentario? Pásame al menos tu link...

    ResponderEliminar
  33. Ola Oloman..
    Esta entrada me gusto e la aplique em mi site ..
    El problema es que dentro del DIV e colocado um video e quando cierro la ventana el video sigue tocando . Sabes conmo resolver el problema .
    Saludos desde portugal e perdona mis errores intentando escrivir em español.
    Plácido De Oliveira

    ResponderEliminar
  34. Hola Plácido. No te preocupes porque tú escribes mucho mejor en español que yo en portugués :D

    Aunque en la entrada comento que este es uno de los problemas de mostrar vídeos, se me ocurre que un post de Vagabundia que ví hace unos días podría ser la solución. Tendrías que ver YouTube y JavaScript 2 para ver cómo funciona todo ese tema.

    Una vez instalada la librería SWFObject y las funciones accesorias, se trataría de incluir una llamada a la función PAUSE o STOP en la parte que construye el cierre (X) de la ventana:

    <div style="position:absolute;top:-25px;right:0px;background:#ffffff;color:#000000;padding:1px;">
    <a href="javascript:stop();javascript:plegardesplegar('idatenuar');javascript:plegardesplegar('idbloque');">[X]</a>
    </div>

    Creo que podría funcionar. Si lo pruebas, dime que tal te ha ido.
    Saludos.

    ResponderEliminar
  35. Bueno, em primer lugar muchas garcias por tu pronta respuesta Olomam. Lo intente e me fallo. No hay problema seguire buscando una solucion para el problema. Ahora te dejo el link de mi site, no queria hacerlo porque esso parece que lo quiero promocionar o algo, no te preocupes, solo tiene mis musicas e mis poesias, pero podras ver el problema.
    Olomam saludos e que tengas um espectacular 2010.
    Plácido Oliveira

    ResponderEliminar
  36. Lo he probado y es algo más complicado de lo que creía. A mí me ha funcionado de la siguiente manera:

    En primer lugar hay que cargar la librería y las funciones, pero también hay que cargar el reproductor mediante el script que el mismo Vagabundia muestra a continuación de las funciones, en lugar del código para embeber de YouTube.

    Ahora, el vídeo no se ve hasta que se fuerza la carga, para eso he habilitado un botón en el contenido oculto con un onclick al que se le incorpora la función loadNewVideo con la ID que ese vídeo tiene en YouTube. Esta es la parte buena :( Una vez instalado eto, como veo que tu haces uno semanal, los cambios periódicos se limitarían a cambiar esa ID. (es por buscarle la parte positiva)

    Y ahora sí que añadiendo en el mismo sitio que te dije un onclick='stop();' el vídeo se para en el momento de cerrar.

    Seguro que hay otra forma menos farragosa de hacer esto, pero yo no la he encontrado.

    ResponderEliminar
  37. hola un saludo y felicitaciones por este blog tan interesante,fijate que eh estado tratando de implementarlo en mi blog y se que estoy haciendo algo mal que no funciona el script ya hise de todo y la verdad no puedo echarlo andar yo pienso que alomejor no eh distribuido bien el codigo , aque por como lo pones junto al ultimo creo que va junto , lo eh puestod despues del body y antes del body y nada.

    Espero arreglarlo antes de tu respuesta pero no creo buen de antemano gracias mi blog es http://oliverosm.blogspot.com/

    ResponderEliminar
  38. ya encontre la respuesta que ahora es parte de otro problema, el codigo seme echa a perder por que me convierte ' por &quot y no se como solucionarlo ya que lo cambio por " y me da errores de todo tipo si pudiera echarme la mano con eso se lo agradeceria . Un saludo desde Mexico.

    ResponderEliminar
  39. Hola Oliveros. Ya he sustituido el código que había. El problema es que Blogger no soporta bien las comillas dobles, por lo que en la parte HTML, hay que sustituirlas por simples ('). Cuando después de hacer este cambio, hay elementos que necesitan comillas simples, entonces, para ellos, se utilizan las dobles, pero es necesario escribirlas como &quot; para que se interprete bien. Un pequeño lío, pero fácil de hacer cuando se sabe.

    ResponderEliminar
  40. Muchas gracias Oloman por tu ayuda ya funciono, fijate que revise el codigo y es precisamente lo que me hacia el blog solo, pero conmigo no funcionaba en ningun lado y el tuyo si, voy a seguir instruyendome en el tema por que para serte sincero si se de que hablas, pero no entiendo bien (por asi decirlo), la teoria por lo pronto muchas gracias por tu tiempo y ayuda.

    ResponderEliminar
  41. El problema es que el blog solo (como tú dices) te transforma las comillas dobles en simples, pero las simples te las convierte en &apos; Y creo que sólo funciona bien si estas últimas se sustituyen por &quot;

    ResponderEliminar
  42. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  43. Hola Oloman. Tengo una pregunta. Podría conseguir el mismo efecto para mi blog de sexo, pero que me saliese al abrir el blog, advirtiendo de su contenido para adultos? Lo estoy intentando pero no consigo hacerlo funcionar. Muchas gracias!!

    ResponderEliminar
  44. Aitor, pincha en el enlace del primer párrafo bajo las palabras splash screen. Creo que eso es lo que quieres.

    ResponderEliminar
  45. Gracias Oloman, es justo lo que necesito. El problema es que no sé cómo combinar ambos efectos. Para que te hagas una idea, quiero este resultado: http://www.diariodeunapornostar.com/

    Llevo un buen rato intentandolo y consigo el efecto, pero a la hora de cerrarlo, sólo se me cierra o el fondo o la pantalla con el texo. A ver si me lo solucionas.
    Gracias y un saludo!

    ResponderEliminar
  46. La respuesta a Victor en el comentario 19 es para que la ventana del aviso se abra sola, pero que además salga la capa oscura que tapa parcialmente todo lo demás. Aunque breve, espero que te aclares con esa explicación.

    ResponderEliminar
  47. Perfecto Oloman, es justo lo que quiero. Lo que pasa es que quiero cerrar ambos elementos a la vez, pulsando en una palabra "ENTRAR". Con lo que me dices solo consigo cerrar una de las 2 cosas. A ver si me sabes decir cómo introducir esas 2 acciones en un enlace, como si de la X se tratase.
    Sólo me queda ese detalle.
    Muchas gracias!

    ResponderEliminar
  48. Aitor, para eso el enlace debería llamar al script PLEGARDESPLEGAR dos veces, una para cada una de las capas. En el ejemplo de este post:
    <a href="javascript:plegardesplegar('idatenuar');javascript:plegardesplegar('idbloque');">BOTON ENLACE</a>

    ResponderEliminar
  49. Sabes que pasa, que al mezclar los 2 tutoriales que comentas en el comentario 19, al final no usamos el script PLEGARDELPLEGAR, por lo que no puedo llamarlo!

    El tema es, cómo puedo llamar en el href a idatenuar y a idbloque a la vez? El fin de todo tiene que ser: Que al entrar en mi blog aparezca una ventana modal con su fondo semitrasparente, avisándome de su contenido, y un enlace que ponga ENTRAR, y que al darle desaparezcan ambos. Espero que me hayas entendido.
    Muchas gracias y un saludo!!

    ResponderEliminar
  50. Hubiera preferido que encontraras tú mismo la manera, pero en fin. Todo esto, justo después del <body> Ten cuidado, porque acabo de caer en la cuenta de que va a salir para todas las páginas. Deberías poner al menos un condicional para que sólo se ejecute todo esto si estamos en la página Inicio:
    <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>
    <div class='visible' id='idatenuar' style='z-index:99; position:fixed; top:0px; left:0px; overflow:visible; height:100%; width:100%; background:#000000; -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80); filter:alpha(opacity=80); -moz-opacity:0.8; opacity: 0.8; -khtml-opacity: 0.8;'/>
    <div class='visible' id='idbloque' style='position:fixed; overflow:visible; top:50%; left:50%; width:400px; height:300px; margin-top:-150px; margin-left:-200px; border:5px solid #990000; background:#ffffff; color:#000000; padding:20px; text-align:center; z-index:100;'>
    <a href='javascript:plegardesplegar(&quot;idatenuar&quot;);javascript:plegardesplegar(&quot;idbloque&quot;);'>DE ACUERDO</a>
    </div>

    ResponderEliminar
  51. Aitor, esta tarde he descubierto otra forma de que sólo salga la primera vez. Voy a probarla y si me funciona, ya publico algo.

    ResponderEliminar
  52. Gracias Oloman! Ayer estuve buscando algo de información sobre coockies, pero no conseguí que sólo saliese la primera vez... Así que si lo consigues me ayudarías muchísimo!! GRACIAS.

    ResponderEliminar
  53. Exacto. Con cookies es como se me ocurrió hacerlo y ¡funciona! En cuanto pueda lo publico.

    ResponderEliminar
  54. Bien!! Espero impaciente! Ya sabía yo que encontrarías la forma... Gracias.

    ResponderEliminar
  55. Oloman! Cómo va eso? Que me has dejado con la duda! A ver si sacas un ratito...
    Un saludo y gracias!!

    ResponderEliminar
  56. Bien, Aitor, bien ;). Mañana tienes la parte genérica de las cookies. Con eso creo que ya lo podrás hacer. Si no, en unos días más el kit completo.

    ResponderEliminar
  57. Llevaba un tiempo detrás de probar este código y al final ha terminado resultando perfecto para crear spoilers. Gracias por el código :)

    ResponderEliminar
  58. ¿Esto sí te funciona en tu plataforma?!!! ;)

    ResponderEliminar
  59. Jjajajajajaja pensaba que te habías olvidado de mi :P Solo tuve que modificar el CSS

    ResponderEliminar
  60. Bueno, no destaco precisamente por mi buena memoria, pero al ver tu blog ya sí que recordé cosas :D

    ResponderEliminar
  61. mmm, no se que pasa que cuando pongo el código embebido de youtube en medio del div, me sale el error de que la plantilla no se formó bien. y eso que lo chequé varias veces, busque en vagabundia pero todavia no le encuentro la vuelta.

    me dice algo sobre que no se cerró bien, y las ";"

    ResponderEliminar
  62. Pues esta claro que algo falta o sobra en ese código. No hay otra explicación para eso.
    Haz pruebas con un texo en lugar de un vídeo y si te funciona, ya estando seguro de que toda esa parte va bien, entonces sustituyes el texto por el código del vídeo.

    ResponderEliminar
  63. de verdad que es raro, funciona con textos, con imágenes, con ambos y que tengan links, pero con videos no, probe cerca de 5 videos, ninguno me permite guardar, me sigue saltando el error, lo peor es que si lo hago en una entrada el video anda, pero yo lo quiero siempre =(

    ResponderEliminar
  64. Oloman, pensé que había descubierto una solución, pero casi, probé con hacer el archivo .js y así embeberlo en el código de script que encontré por ahí, pero no funciona, de nuevo me dice que hay algo mal cerrado. nosé, y es que necesito ubicar el video ahí :D

    ResponderEliminar
  65. Creo que puedo tener una pista. Si el código de embeber el vídeo, lo estás poniendo directamente en la plantilla, tienes que cambiar todas las " por ', todas las ' por &quot; y por último, todos los & por &amp;

    Prueba con esto...

    ResponderEliminar
  66. Hola Oloman, he leido con atención todo lo que has escrito sobre ventanas modales. El efecto me encanta, pero mi problema es que yo uso wordpress y no sé como adaptar estos códigos a mi CMS.

    Quería preguntarte si tu sabrías como hacerlo o en caso contrario, si conoces alguna web donde pueda encontrar información al respecto.

    Muchas gracias y felicidades por tu fantástico blog.

    ResponderEliminar
  67. SP48, no sé cómo funciona WP, pero en este enlace tienes un ejemplo para instalar ventanas modales con iBOX. Espero que te sirva de ayuda.

    ResponderEliminar
  68. Muchas gracias Oloman, al final he encontrado un plugin que facilita mucho el trabajo, pongo la dirección del mismo por si pudiera interesar a alguien.

    http://wordpress.org/extend/plugins/content-warning/

    ResponderEliminar
  69. hola, bueno, me ha servido mucho este post y el detalle con que se explica, pero me tengo un problema y me gustaria saber si como lo puedo resolver.

    Lo que quiere es tener la una gran opacidad en la parte negra, pero no quiero que afecte al contenido, es decir, que no quiero que el contenido lleve opacidad.

    He intentado creando el contenido dentro de un div pero este hereda la opacidad.

    ResponderEliminar
  70. Jorge, no entiendo muy bien lo que quieres.

    Para una mayor opacidad de la parte traslúcida, sólo tienes que cambiar los valores de -ms-filter, filter, -moz-opacity, opacity y -khtml-opacity. Eso "tapará" el contenido general del blog, que es de lo que se trata, pero no afectará a la transparencia del contenido, siempre que esté dentro del DIV IDBLOQUE.

    Si me lo puedes indicar de otra manera...

    ResponderEliminar
  71. hola, muchas gracias por contestar, estube buscando la info.

    Saque un pantallazo, a lo mejor ahi me puedo dar a entender mejor.

    El asunto es que he intentado darle una opacidad distinta al div que contiene el margen(en mi caso es medio rojo el margen) pero no hay caso pues cambia la opacidad tanto para el div contedor como para el padre, es decir la opacidad se aplica a toda la pagina.

    este es el enlace del pantallazo http://a.imageshack.us/img840/6600/consultasimularunaventa.gif

    Y gracia de nuevo por la ayuda, si no es posible resolver el problema igual estay agradecido por tu pagina que casi la tengo como consulta frecuente.

    ResponderEliminar
  72. En un principio no se deberían heredar la propiedades, puesto que lo que he llamado en esta entrada IDATENUAR e IDBLOQUE, son dos capas distintas solapadas, no anidadas. Quizás es que metiste un DIV dentro de otro.

    De todas formas, se podría forzar que no hubiera transparencia en IDBLOQUE, añadiéndole una etiqueta STYLE a ese DIV, incluyendo todos los valores de transparencia que antes dije con el valor de opacidad total.

    A ver si ahora... :D

    ResponderEliminar
  73. Amigo Oloman

    Queria preguntarte que clase de libreria usa este efecto?

    Gracias por anticipado!...

    ResponderEliminar
  74. Circulo W.H., la gracia de este truco es que no usa ninguna librería. Todo se hace sólo con lo que ves en la entrada. Muy simple, aunque sólo para aplicaciones puntuales precisamente por estar construído "a mano".

    ResponderEliminar
  75. Estimado Oloman... ¡¿Cómo estás, tanto tiempo?!
    Espero que muy bien. (Y por lo que puedo leer, con mucho que contestar.)

    Preciso hacerte una consulta: ¿Es posible usar esta opacidad como cubierta de un gadget (o widget, o cacharro) determinado, y que varíe con él su tamaño y posición?
    La idea (por si no formulé bien la pregunta) es "tapar" el contenido de un gadget y "descubrirlo" al cliquearlo.

    Mil gracias por tu ayuda de siempre.

    ResponderEliminar
  76. José, ¿el "tapado" sería como poner una capa negra sobre el gadget -o translúcida- o lo que pretendes es mostrar una cosa y cuando se haga click otra distinta? Me haría una mejor idea si me dijeras exactamente que efecto quieres conseguir, porque lo mismo hay algo más sencillo y eficaz que esto.

    ResponderEliminar
  77. Sería algo así:
    Una capa translúcida (oscura) sobre el gadget ( esta capa contendrá un texto y, al cliquearlo, desaparecerá la capa y quedará el contenido del gadget). Tal y como si fuera en la pantalla completa pero enmarcado por el tamaño del gadget.

    ResponderEliminar
  78. Ok José, eso está a mi alcance ;)

    En unos días lo publico.

    ResponderEliminar
  79. hola Oloman se le podria agregar una especie de transicion al abrir la ventana modal, me gustaria saber como se puede hacer, he visto unas que implementan html5, pero quiero implementarlo con esta que esta en tu muro, ojala y se pueda muchas gracias, un gran abrazo desde colombia..

    ResponderEliminar
    Respuestas
    1. Con esta exactamente no se puede hacer transiciones, pues en lugar de cambiar la clase (visible, invisible), lo que habría que hacer sería cambiar las propiedades de opacidad y/o tamaño. Así sí que se vería una transición.

      El problema es que para que yo pueda desarrollar ese otro sistema, necesito un tiempo del que no dispongo ahora mismo. Quizás, como tampoco tengo previsto publicar nada, alguno de los próximos artículos pueda ser sobre esto.

      Eliminar
    2. al parecer en este blog realiza lo que requiero http://www.ajimix.net/blog/ventana-modal-modalbox-con-css/ , muchas gracias por tu pronta respuesta

      Eliminar
    3. Pues ahí tienes tu respuesta ¿por qué no usas esa? Está explicado en español, así que no deberías tener problemas. Lo único es que dice que sólo usa CSS, pero realmente lleva algo de JavaScript, aunque para tu caso no creo que tenga importancia.

      Eliminar