Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » PHP » Ventana emergente

PHP - Ventana emergente

Volver
Nuevo Tema
<<>>
 
Vista:
sin imagen de perfil

Ventana emergente

Publicado por roman (8 intervenciones) el 11/11/2014 22:18:55
Hola que tal? Estoy armando un pequeño sitio web sin mucho conocimiento de programación. Queria saber si alguno me podria explicar como hacer que para cuando el usuario haga click en una imagen, la misma desplegue una ventana que desarrolle un poco mas la idea.
La ide la vi en este sitio: http://hayacuerdo.ciudadanointeligente.org/binominal/
Si se pincha en ver mas se despliga una ventana con mas informacion!
Agradeceria el que me pueda dar una mano!
saludos
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
sin imagen de perfil

Ventana emergente

Publicado por Ismael (41 intervenciones) el 11/11/2014 22:52:50
Hola Roman,

en realidad no necesitas PHP para realizar esto,
simplemente en la imagen le agregas un evento onclick que llame a una función javaScript por ejemplo, en esta función le indicas que el contenedor que contiene el contenido oculto donde previamente se ha cargado la información se despliegue.
por ejemplo:

en el HTML por ejemplo pones esto:

1
2
3
4
<img src="imagen.jpg"  id="imagen1" onclick="despliega('contenedor1')">
<div id="cotenedor1" style="height:0px;">
Contenido oculto que le hemos puesto un height de 0px;
</div>


en el HEAD pones por ejemplo esto:

1
2
3
4
5
<script>
 function despliega(contenedor){
    document.getElementById(contenedor).style.height="200px";
}
</script>

Esto es una de las muchas formas de las que se puede hacer, pero es básicamente lo mas sencillo que se puede hacer, se puede animar el despliegue con JQuery por ejemplo o con CSS3, o en vez de modificar el height, modificar el display del css

Un saludo, espero haberte ayudado
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil

Ventana emergente

Publicado por roman (8 intervenciones) el 12/11/2014 04:50:02
Hola muchas gracias!! Voy a intentar a ver si puedo. Se poco y nada de programacion.
nuevamente gracias
saludos
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil

Ventana emergente

Publicado por Ismael (41 intervenciones) el 12/11/2014 08:49:17
Hola,
Perdona, pero mi respuesta no es la correcta, me había liado con otro tipo de ventana.
Ahora en un momento te explico y te pongo como llevarlo a cabo, en un principio de una forma básica para que veas su funcionamiento.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil

Ventana emergente

Publicado por Ismael (41 intervenciones) el 12/11/2014 09:32:02
en el html
1
2
3
4
5
6
7
8
9
10
<img src="imagen.jpg"  style="width:40px;" id="imagen1" onclick="despliega(this.src,'Contenido de información extra')">
<div id="transparencia" style="background-color:black;opacity:0.7; FILTER: alpha(opacity=70);z-index:1999;visibility:hidden;position:fixed;top:0px;left:0px;height:100%;width:100%;">
<div id="cotenedor" style="z-index:2000;visibility:hidden;position:fixed;top:0px;left:0px;height:100%;width:100%;">
  <div style="margin:0 auto;">
   <img id="img_contenedor" style="float:left;" src="">
   <span id="texto_contenido" style="clear:both;"></span>
   <br>
   <input type="button" value="cerrar ventana" onclick="cerrar_ventana()" >
  </div>
</div>

en el head

1
2
3
4
5
6
7
8
9
10
11
function despliega(ruta_imagen,contenido){
  document.getElementById('img_contenedor').src=ruta_imagen;
  document.getElementById('texto_contenido').innerHTML=contenido;
  document.getElementById('transparencia').style.visibility="visible";
  document.getElementById('cotenedor').style.visibility="visible";
}
 
function cerrar_ventana(){
 document.getElementById('transparencia').style.visibility="hidden";
  document.getElementById('cotenedor').style.visibility="hidden";
}

Esta es la forma un poco rudimentaria de como funcionaria

Hay un div que se llama transparencia que hace como de fondo de la imagen pero es semi translúcida que abarca toda la pantalla
Luego hay otro div que es el contenedor donde se albergará la imagen y la descripción.
Estos dos divs se establecen como no visibles hasta que el usuario hace click en la foto que llama a la funcion despliega, que le pasa como parámetros la ruta de la imagen y el contenido informativo.

La otra función hace que se oculten las dos capas.
También hemos establecido la propiedad z-index la primera 1999 que es la transparéncia que quedaría por debajo de la del contenedor con z-index 2000.

Espero que te haya servido de algo, por lo menos para empezar.

Un saludo.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil

Ventana emergente

Publicado por roman (8 intervenciones) el 12/11/2014 23:48:56
Muchas gracias Ismael.
Voy a tener que ponerme a leer antes de aplicarlo porque sobrepaso mis pocos conocimientos.
Estoy muy agradecido por la mano que me diste
saludos
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar