Foundation-sites: ¿Revelar el posicionamiento modal?

¿Tiene un enlace para que podamos ayudar a averiguar qué está pasando?

Déjame ponerlo en funcionamiento donde puedas verlo y luego te enviaré un mensaje con los detalles de inicio de sesión.

Ok, te envío los detalles en un mensaje privado.

Creo que estableciste una regla en tu css .column, .columns {posición: relativa;}

El modal de revelado se posiciona en absoluto. No sé por qué no está posicionado fijo. ¿Posiblemente para habilitar el desplazamiento?

Entonces, el modal absolutamente posicionado se alinea con su primer padre posicionado (clase = "ocho columnas"). Podrías intentar agregar CSS de esta manera ...

.reveal-modal {posición: fija;)

y mira si eso funciona de la manera que quieres

Está bien. Eso es de la línea 17 del grid.css de Foundation.

está bien. No pude leer sus nombres de archivo. Solo soy un usuario, no un desarrollador de zurb. Puede probar lo fijo o desanidar su div modal y ponerlo en la parte inferior del html.

En realidad, cambié a ColorBox para los modales y solo quería informar el error (si es un error y no un error mío). ¡Gracias por la ayuda para localizar el problema! Pasé horas jugando con él, pero no pude encontrar el problema.

Seré honesto, no puedo seguir el lado detrás de escena de esta conversación :) ¿Hay un error en Reveal o fue un conflicto con otros estilos?

El problema es que si coloca un modal de revelación dentro de una columna, el modal de revelación se alinea con esa columna en lugar de alinearse con la ventana del navegador. No sé si esto es algo que puedas arreglar o no.

Parece que podría establecer el modo de revelar en la posición: fijo como predeterminado, pero no sé si tiene una razón en contra.

Oh, te tengo. Sí, los modales de Reveal están diseñados para colocarse al final de la página, no dentro del diseño; usamos absoluto en lugar de fijo para que pueda seguir desplazándose por la página (si lo desea). Sin embargo, cambiar eso a la posición: fijo lo arreglaría.

Probablemente sea mejor mencionar eso en los documentos, entonces.

El 30 de noviembre de 2011, a las 7:14 p.m., Jonathan [email protected] escribió:

Oh, te tengo. Sí, los modales de Reveal están diseñados para colocarse al final de la página, no dentro del diseño; usamos absoluto en lugar de fijo para que pueda seguir desplazándose por la página (si lo desea). Sin embargo, cambiar eso a la posición: fijo encajaría.

---

Responda a este correo electrónico directamente o véalo en GitHub:
https://github.com/zurb/foundation/issues/129#issuecomment -2968907

@ smileyj68 ¿ alguna idea de lo que está haciendo la posición: pariente en .column, .columns en grid.css? Posición: fijo en el modal de revelación no es una gran opción cuando se trabaja en un sitio receptivo, ya que realmente necesita desplazarse por eso. Voy a intentar sobrescribir eso aquí localmente y probaré si se rompió algo. Pero si tiene alguna idea, me encantaría escucharla.

Este problema también me mordió en la parte trasera. Ojalá estuviera documentado ...

Y yo, buen trabajo por este comentario. Dice en los documentos ponerlo después de todo, pero cuando se usa con Wordpress eso significa en el pie de página. Sería útil si dijera por qué hacerlo.

Yo también. Después de colocarlo en la posición: fijo; y desbordamiento: desplazamiento; las cosas salieron bien.

¡¿Alguna solución?! Establecer la posición fija no es una buena idea si su modal es grande. Si alguien encuentra alguna solución, por favor escriba aquí. ¡Gracias!

sigo teniendo este problema :(! ¿Alguna solución? PLZ

El ajuste de la posición a fijo no funciona

Me las arreglé para que funcionara. el cambio de posicionamiento absoluto a fijo funcionó cuando abrí foundation.css y foundation.min.css y cambié el posicionamiento en la clase .reveal-modal en ambos archivos de la siguiente manera:

-absoluta a fija
- superior: 50px a 30% (puede cambiar esto, necesitaba cambiarlo para que baje lo suficiente para ver)

Definitivamente, esto es un problema si está utilizando Foundation para algo más que HTML estático. My Foundation Theme Framework para Shopify también tiene problemas con las ventanas emergentes modales para las imágenes de los productos. Usar .reveal-modal { posición: fija; desbordamiento : desplazamiento} ciertamente ayuda. Pero no es una solución real. 'Revelar' puede ser muy feo y poco práctico en este caso. Ninguna cantidad de CSS puro va a solucionar esto, por lo que puedo ver.

El problema que está experimentando es que el modal Reveal se ve afectado por el padre de posicionamiento en versiones anteriores, por lo que en realidad solo debería tener un modal Reveal como hijo directo del elemento body.

No debería ver este problema con la versión 4.3.2, ya que garantiza que el modal se mueva para ser un hijo directo de body mientras que el modal está visible, lo que alivia cualquier problema de posicionamiento extraño que su CSS está causando. .

Si ve esto en 4.3.2, abra un ticket con un ejemplo, ya que hice cambios específicos para asegurarme de que funciona correctamente.

Estoy de acuerdo en que este "Reveal modales está diseñado para colocarse al final de la página, no dentro del diseño" debe colocarse en la documentación porque los novatos pueden enojarse con esta omisión. Tuve que buscar en toda la web antes de ver el comentario de @ smileyj68 Gracias

@ chimdi2000 A partir de 4.3.2, esto ya no es un problema, ya que javascript lo moverá por usted si no lo tiene en el lugar correcto, por lo que creo que no es necesaria ninguna documentación adicional.

Gracias por el aviso @seantimm. ¡Creo que será mejor que actualice el marco temático de Shopify Foundation 4!

@seantimm 4.3.2 ha solucionado mis problemas de posicionamiento, pero debido a que tienen elementos de formulario dentro de la revelación y se mueven fuera del formulario, ya no se pueden enviar.

Como solución personalizada, agregué una configuración para appendElement que permite agregarlos a una ubicación específica en el documento. ¿Alguna posibilidad de agregar esto en una versión futura?

Me doy cuenta de que este es un hilo antiguo, pero a partir de diciembre de 2014, todavía me encuentro con este problema. De acuerdo, es una solución bastante simple, pero el objetivo de usar un marco como este es para que no tengamos que dedicar tiempo a las cosas básicas y podamos concentrar nuestro tiempo en otra parte.

¿Hay planes para desarrollar esto en futuras versiones? La capacidad de elegir si el modal es una posición fija o absoluta parece una gran característica. Parece que podría hacerse con algunas variables sass.

@ smileyj68 , ¿puedes explicar por qué es deseable que la página continúe pudiendo desplazarse mientras una revelación está abierta? Me parece que cuando un modal está abierto, el contenido de la página debe bloquearse. ¿No es preferible arreglarlo y establecer una propiedad de desbordamiento para que el modal se desplace? Si este fuera el valor predeterminado, no sería necesario colocarlo al final de la página, lo cual es una dificultad para muchas situaciones de CMS.

Además, tuve que cambiar la posición de revelación de bg de absoluta a fija en todos mis proyectos. No entiendo por qué eso alguna vez se establecería como absoluto.

Me encontré con un problema similar esta mañana (usando foundation-rails 5.4.5) y lo resolví agregando lo siguiente a .reveal-modal para solucionarlo y centrarlo en la página:

.reveal-modal.open {
  position:fixed;
  top:50%!important; /* override inline style injected from JS */
  left:50%;
  transform:translate(-50%, -50%);
}