Problema con modal window y overlay


Hace poco estaba trabajando en un proyecto en el cual el usuario tenía que hacer click en un elemento y salía un modal window mostrándole un video o una galería de fotos.

Todo se veía bien, pero de repente encontramos que el modal window no se pintaba bien, se pintaba a medias o no se pintaba en absoluto y parecía que la pantalla estaba congelada.

No quiero llegar a conclusiones y afirmar cosas que no sean, pero bueno, el maquetado no lo hice yo pero me encargue de casi todo el JS.

Para el proyecto me encargaron armar una galería de fotos, en el cual cuando se hiciera click en un una thumb y se mostrara la foto en tamaño completo dentro de un modal window.

En la mayoría de los navegadores funcionaba bien, pero lo que normalmente pasaba era que la foto no se veía, el overlay negro que todos los sitios muestran cuando se abre un modal window no funcionaba correctamente y el iframe donde se tenía que mostrar el video no se veía, parecía que hubiera estado hidden con css.

No encontré ninguna solución en linea y comencé a modificar el código.
Encontré que el modal y el overlay estaba muy adentro en el DOM, anidados dentro del contenido del sitio; normalmente pongo los modals a nivel de body y siempre han funcionado bien, por lo que esta vez me puse a jugar con el código y decidí mover el modal afuera del contenedor principal y mágicamente el overlay se empezó a ver bien junto con las fotos y los videos en el modal window.

Este es un antes y después del modal window una vez que modifiqué la jeraraquía del DOM:

Captura de pantalla 2014-10-26 a la(s) 00.53.00

Captura de pantalla 2014-10-26 a la(s) 00.52.12

No se si sea un buen consejo pero si quieren poner una galería o un modal en un sitio web, estén seguros de que el modal y el overlay se encuentren a nivel de body.

Anuncios
Esta entrada fue publicada el 26 octubre, 2014 a las 1:03. Se guardó como Tech y etiquetado como , , , , , , , , , . Añadir a marcadores el enlace permanente. Sigue todos los comentarios aquí gracias a la fuente RSS para esta entrada.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: