Foros del Web » Creando para Internet » CSS »

[SOLUCIONADO] Convertir una capa en ventana emergente

Estas en el tema de Convertir una capa en ventana emergente en el foro de CSS en Foros del Web. Buenas, Tengo un div, pequeño formulario de búsqueda a la parte lateral izquierda de la pantalla. Me gustaría que por debajo de los 800 píxeles, ...
  #1 (permalink)  
Antiguo 26/08/2014, 08:35
 
Fecha de Ingreso: enero-2002
Ubicación: Sabadell
Mensajes: 565
Antigüedad: 20 años, 10 meses
Puntos: 4
Convertir una capa en ventana emergente

Buenas,
Tengo un div, pequeño formulario de búsqueda a la parte lateral izquierda de la pantalla. Me gustaría que por debajo de los 800 píxeles, desapareciera y se convertiera en una pantalla emergente.
Es posible hacerlo dentro del media query correspondiente?

Código CSS:
Ver original
  1. @media screen and (max-width:800px){}

Gracias
__________________
Qué fácil cuando lo sabes y qué difícil cuando no
  #2 (permalink)  
Antiguo 26/08/2014, 15:37
 
Fecha de Ingreso: enero-2002
Ubicación: Sabadell
Mensajes: 565
Antigüedad: 20 años, 10 meses
Puntos: 4
Respuesta: Convertir una capa en ventana emergente

Quizás esté preguntando una tontería, pero me gustaría saber la opinión de alguien que domine el tema.
Gracias
__________________
Qué fácil cuando lo sabes y qué difícil cuando no
  #3 (permalink)  
Antiguo 26/08/2014, 15:39
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.487
Antigüedad: 20 años, 4 meses
Puntos: 2114
Respuesta: Convertir una capa en ventana emergente

¿Qué es un ventana emergente? El término confuso es ventana. Si quieres que esté por encima de lo demás te basta con colocarlo con una posición absoluta, ¿no?
__________________
(:
  #4 (permalink)  
Antiguo 28/08/2014, 00:49
 
Fecha de Ingreso: enero-2002
Ubicación: Sabadell
Mensajes: 565
Antigüedad: 20 años, 10 meses
Puntos: 4
Respuesta: Convertir una capa en ventana emergente

Gracias pzin, tu respuesta me sirve y no me sirve.
Creo que no he acabado de explicar que es lo que pretendo hacer.

Tengo un buscador lateral con un ancho del 30%. Cuando la resolución es inferior a 800 píxeles, por mediaquery, lo escondo y aparece una lupa.

Hasta aquí todo bien, pero ahora no sé bien como seguir:
Al hacer click sobre la imagen tiene que aparecer de nuevo el buscador, pero no ocupando el 30% del ancho, sinó ocupando lo que ocupe, y por encima de todo. Al pulsar el botón Buscar, tiene que desaparecer de nuevo, y aparecer la lupa.

No sé cual es la mejor manera de hacerlo. Y mi pregunta es si será posible forzar la visualización del buscador, cuando por media query lo tengo escondido.

Gracias.
__________________
Qué fácil cuando lo sabes y qué difícil cuando no
  #5 (permalink)  
Antiguo 28/08/2014, 01:17
 
Fecha de Ingreso: junio-2011
Ubicación: Asturias
Mensajes: 228
Antigüedad: 11 años, 6 meses
Puntos: 14
Respuesta: Convertir una capa en ventana emergente

En el media query puedes poner un display:none y una posición absoluta para mostrarlo, y cuando le des a la lupa, por medio de javascript, le cambias el display a block.

Creo que esa solución podría servir
  #6 (permalink)  
Antiguo 28/08/2014, 11:11
 
Fecha de Ingreso: mayo-2013
Mensajes: 207
Antigüedad: 9 años, 6 meses
Puntos: 31
Respuesta: Convertir una capa en ventana emergente

Yo no me entero aun muy bien de lo que quieres:
- lo de pantalla emergente me suena a algo tipo modal windows http://www.webdesignerdepot.com/2012...tml5-and-css3/

- me descoloca lo de ensancharlo y colocarlo por encima de todo. Aunque puede que te refieras a algo como en wordpress http://twentyelevendemo.wordpress.com/

a ver si puedes aclararlo un poco
  #7 (permalink)  
Antiguo 28/08/2014, 16:13
 
Fecha de Ingreso: enero-2002
Ubicación: Sabadell
Mensajes: 565
Antigüedad: 20 años, 10 meses
Puntos: 4
Respuesta: Convertir una capa en ventana emergente

Gracias Javierflti, no sé, había pensado que entraría en contradicción el media query con javascript, ya que en un lugar dices esconder mientras al otro visualizar.
Lo he probado y funciona. Gracias

Alzacon, resumiendo lo que quiero es que ocultar una barra vertical cuando la resolución horizontal es pequeña. En lugar de esta, aparece una lupa, para provocar el volverla a visualizar.

La solución es la idea ofrecida por Javierflti
__________________
Qué fácil cuando lo sabes y qué difícil cuando no

Etiquetas: emergente, ventana, width
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 21:49.