Ventanas emergentes

diegofraga1998 · #1 (**permalink**) 21/07/2011, 10:02

Buen dia

Les escribo porque estoy diseñando un sitio web y mi cliente me pidió algo que no se cómo hacerlo. Son unas ventanas pop ups que se abren al hacer click sobre la imagen pero como las que están en el sitio www.despegar.com.ar por ejemplo. En este sitio haces click sobre la imagen de “mejor precio garantizado” y te abre una ventana que no la bloquea el navegador web, sino que se abre dentro del mismo sitio y con un estilo definido.

El editor que uso es el dreamweaver e intente hacerlo a través de los comportamientos, pero no me salió. Lo hice con el comportamiento “abrir ventana del navegador” pero no es, otro que probé es “mensaje emergente” pero no queda bien tampoco.

Calculo que se hace con Java scripts, alguien me podría dar una mano con esto por favor?

Desde ya muchas gracias

Diego

laratik · #2 (**permalink**) 21/07/2011, 10:19

Creo que te refieres a las ventanas modal, se pueden implementar con javascript o con CSS y solo emplear javscript para ocultar y mostrar la ventana modal. Una ventana modal no es mas que un div posicionado como fixed y con un z-index muy alto. Puedes utilizar alguna librería como JQuery, prototype, mootools, etc o este script, aunque no soy partidario de los frameworks, hay que reconocer que es el camino más rápido.

ArturoGallegos · #3 (**permalink**) 21/07/2011, 10:20

eso parece un tooltip

te dejo unos enlaces

-> enlace 1 - revisa el punto 8 donde dice click me, me parece que es lo que buscas de ser así en el menú de esa pagina busca "Overview" allí encontraras lo necesario para hacer el efecto.

y aquí puedes encontrar mas tooltips
-> clic aquí

caricatos · #4 (**permalink**) 21/07/2011, 10:49

Cita:

Iniciado por laratik

Creo que te refieres a las ventanas modal, se pueden implementar con javascript o con CSS y solo emplear javscript para ocultar y mostrar la ventana modal. Una ventana modal no es mas que un div posicionado como fixed y con un z-index muy alto. Puedes utilizar alguna librería como JQuery, prototype, mootools, etc o este script, aunque no soy partidario de los frameworks, hay que reconocer que es el camino más rápido.

Hola:

No te confundas... las ventanas modales por definición detienen el flujo de datos esperando respuesta del usuario y son tres las estándar: alert, confirm y prompt...

Lamento que se haya generalizado esa nominación pero lo correcto es lo que estoy comentando (puedes verlo en la wiki)

Saludos

laratik · #5 (**permalink**) 21/07/2011, 11:00

Cita:

Iniciado por caricatos

Hola:

No te confundas... las ventanas modales por definición detienen el flujo de datos esperando respuesta del usuario y son tres las estándar: alert, confirm y prompt...

Lamento que se haya generalizado esa nominación pero lo correcto es lo que estoy comentando (puedes verlo en la wiki)

Saludos

Hola caricatos, exactamente a eso me refiero, según la wiki: "Permite alternar el foco a otras ventanas del sistema, pero no a la ventana que le da origen ("ventana madre") hasta que se toma una acción sobre ella", como dices las estándar son: alert, confirm y prompt, pero lamentablemente en el entorno web no existe algo como el JDialog en java, en donde puedes crear una ventana modal con el contenido que desees. Hay es donde entran las ventanas modal (me parece que esta bien utilizdo el termino) creadas mediante javascript y css. Saludos caricatos.

Panino5001 · #6 (**permalink**) 21/07/2011, 12:36

laratik, la diferencia que menciona caricatos entre modales reales y pseudomodales puede verse en este ejemplo:

Código PHP:

  <!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style>
*{ margin:0; padding:0;}
.bt{ width:100px; height:20px; font-family:Verdana, Geneva, sans-serif; font-size:10px; background:#999; line-height:20px; text-align:center; border:1px outset #000; margin:5px; float:left; cursor:pointer}
#overlay{ position:fixed; background:#000; opacity:.7;filter:alpha(opacity=70); width:100%; height:100%; display:none; z-index:100; }
#innerpseudomodal{ width:300px; height:100px; position:absolute; left:50%; top:50%; margin-left:-150px; margin-top:-50px; border:1px solid #000; background:#FFF;  z-index:101; display:none; line-height:100px; text-align:center;text-align:center; font-family:Verdana, Geneva, sans-serif; font-size:12px; }
#cerrarpseudomodal{ width:13px; height:13px; line-height:13px; text-align:center; font-family:Verdana, Geneva, sans-serif; font-size:9px; border:1px solid #000; cursor:pointer; position:absolute; top:2px; right:2px; color:#000}
</style>
<script>
var el,i=0;
setInterval(function(){if(a=document.getElementById('test')){a.innerHTML=i++;}},100);
</script>
</head>
<body>
<div id="innerpseudomodal">¿el contador avanza? <div onclick="document.getElementById('overlay').style.display=document.getElementById('innerpseudomodal').style.display='none'" id="cerrarpseudomodal">X</div></div>
<div id="overlay"></div>
<div id="test"></div>
<div onclick="alert('¿el contador avanza?');" class="bt">verdadera modal</div>
<div onclick="document.getElementById('overlay').style.display=document.getElementById('innerpseudomodal').style.display='block'" class="bt">pseudomodal</div>
</body>
</html>

Es por eso que yo estoy de acuerdo con él en esa distinción.

laratik · #7 (**permalink**) 21/07/2011, 12:50

Mi intención no es polemizar sobre este tema, de hecho les doy la razón en que estas ventanas no son completamente modales (aunque actúan como tal, por lo ya explicado anteriormente)

Cita:

Iniciado por laratik

"Permite alternar el foco a otras ventanas del sistema, pero no a la ventana que le da origen ("ventana madre") hasta que se toma una acción sobre ella", como dices las estándar son: alert, confirm y prompt, pero lamentablemente en el entorno web no existe algo como el JDialog en java, en donde puedes crear una ventana modal con el contenido que desees.

Es claro que al no estar definidas como ventanas modales dentro del lenguaje (tal como sucede con la clases, no existen en javascript, pero se simulan), no se puede detener el flujo del programa, pero si bloquea el acceso a la ventana madre. En conclusión creo que el termino pseudomodales (aunque no lo había escuchado antes, he escuchado pseudomonadales y eso no tiene nada que ver) esta más acorde, aunque para investigación es mejor utilizar la palabra modal. Gracias y nuevamente saludos.

caricatos · #8 (**permalink**) 21/07/2011, 19:49

Cita:

Iniciado por laratik

... he escuchado pseudomonadales...

¡Ja, ja!

Cita:

Iniciado por laratik

Mi intención no es polemizar sobre este tema...

...aunque para investigación es mejor utilizar la palabra modal...

Justamente para investigación se debe ser lo más estricto posible, y en vez de modal, más correcto es pseudomodal; o porqué no... ventanas tipo/estilo lightbox...

Saludos