Foundation-sites: Modale Positionierung aufdecken?

Haben Sie einen Link, damit wir herausfinden können, was los ist?

Lassen Sie mich es einrichten und zum Laufen bringen, wo Sie es anzeigen können, und dann schicke ich Ihnen eine Nachricht mit den Zugangsdaten.

Ok, ich schicke dir die Details in einer privaten Nachricht.

Ich denke, Sie haben eine Regel in Ihrer CSS-.column-, .columns-{position:relative;}

Das Reveal-Modal wird absolut positioniert. Ich weiß nicht, warum es nicht fest positioniert ist. Eventuell Scrollen aktivieren?

Das absolut positionierte Modal richtet sich also an seinem ersten positionierten Elternteil aus ( class="eight column" ). Sie könnten versuchen, CSS wie folgt hinzuzufügen ...

.reveal-modal { position:fixed;)

und sehen Sie, ob das so funktioniert, wie Sie es wollen

Okay. Das ist aus Zeile 17 der grid.css der Foundation.

OK. Ich konnte deine Dateinamen nicht lesen. Ich bin nur ein Benutzer - kein Zürb-Entwickler. Sie können das behobene Ding ausprobieren oder Ihr modales Div entschachteln und es an das Ende des HTML-Codes stellen.

Eigentlich bin ich für die Modals auf ColorBox umgestiegen und wollte nur den Fehler melden (wenn es ein Fehler und kein Fehler von mir ist). Danke für die Hilfe bei der Suche nach dem Problem! Ich habe Stunden damit verbracht, damit herumzuspielen, konnte aber das Problem nicht finden.

Ich bin ehrlich, ich kann den Blick hinter die Kulissen dieser Unterhaltung nicht nachvollziehen :) Gibt es einen Fehler in Reveal oder war es ein Konflikt mit anderen Stilen?

Das Problem ist, wenn Sie ein Reveal-Modal in eine Spalte einfügen, wird das Reveal-Modal an dieser Spalte ausgerichtet, anstatt am Browserfenster. Ich weiß nicht, ob man das reparieren kann oder nicht.

Es scheint, als könnten Sie offenbar-modal standardmäßig auf position:fixed setzen , aber ich weiß nicht, ob Sie einen Grund dagegen haben.

Oh, komm. Ja, Reveal-Modals sind so konzipiert, dass sie am Ende der Seite platziert werden, nicht im Layout - wir verwenden absolute statt fixiert, damit Sie die Seite weiter scrollen können (wenn Sie es wünschen). Das Ändern in position:fixed würde es jedoch beheben.

Dann ist es wahrscheinlich am besten, das in den Dokumenten zu erwähnen.

Am 30. November 2011 um 19:14 Uhr schrieb Jonathan

Oh, komm. Ja, Reveal-Modals sind so konzipiert, dass sie am Ende der Seite platziert werden, nicht im Layout - wir verwenden absolute statt fixiert, damit Sie die Seite weiter scrollen können (wenn Sie es wünschen). Das Ändern in position:fixed würde jedoch passen.

---

Antworten Sie direkt auf diese E-Mail oder zeigen Sie sie auf GitHub an:
https://github.com/zub/foundation/issues/129#issuecomment -2968907

@ smileyj68 eine idee, was die position: relativ macht auf .column, .columns in grid.css? Position: auf dem Reveal-Modal fixiert ist keine sehr gute Option, wenn Sie an einer responsiven Site arbeiten, da Sie wirklich darauf scrollen müssen. Ich werde versuchen, das hier lokal zu überschreiben und zu testen, ob es etwas kaputt gemacht hat. Aber wenn Sie einen Einblick haben, würde ich ihn gerne hören.

Dieses Problem hat mich auch gerade in den Hintern gebissen. Wünschte, das wäre dokumentiert...

Und ich, gute Arbeit für diesen Kommentar. In der Dokumentation steht, dass es nach allem steht, aber bei Verwendung mit Wordpress bedeutet dies in der Fußzeile. Es wäre praktisch, wenn es erklärt würde, warum das so ist.

Ich auch. Nach dem Einstellen auf Position: fixiert; und Überlauf: scrollen; die Dinger haben gut geklappt.

Irgendeine Lösungsmöglichkeit?! Feste Position festlegen ist keine gute Idee, wenn Ihr Modal groß ist. Falls jemand eine Lösung findet, bitte hier schreiben. Dankeschön!

Ich habe immer noch dieses Problem :(! Irgendeine Lösung? PLZ

Das Einstellen der Position auf fest funktioniert nicht

Ich habe es geschafft, es zum Laufen zu bringen. Das Umschalten von absoluter Positionierung auf fest funktionierte, als ich Foundation.css und Foundation.min.css öffnete und die Positionierung in der .reveal-modal-Klasse in beiden Dateien wie folgt änderte:

-absolut bis fest
- top: 50px bis 30% (Sie können dies ändern, ich musste es ändern, damit es weit genug herunterkommt, um es zu sehen)

Dies ist definitiv ein Problem, wenn Sie Foundation für mehr als nur statisches HTML verwenden. Mein Foundation Theme Framework für Shopify hat auch Probleme mit modalen Popups für Produktbilder. Die Verwendung von .reveal-modal { position:fixed;overflow :scroll} hilft sicherlich. Aber das ist keine wirkliche Lösung. 'Reveal' kann in diesem Fall sehr hässlich und unpraktisch sein. Soweit ich sehen kann, wird dies mit keiner Menge reinem CSS behoben.

Das Problem, das Sie haben, ist, dass das Reveal-Modal in früheren Versionen von dem positionierenden übergeordneten Element beeinflusst wird, sodass Sie wirklich immer nur ein Reveal-Modal als direktes untergeordnetes Element des body-Elements haben sollten.

Sie sollten dieses Problem mit Version 4.3.2 nicht sehen, da es sicherstellt, dass das Modal als direktes Kind von body verschoben wird, während das Modal sichtbar ist, was alle seltsamen Positionierungsprobleme lindert, die Ihr CSS sonst verursacht .

Wenn Sie dies in 4.3.2 sehen, öffnen Sie bitte ein Ticket mit einem Beispiel, da ich bestimmte Änderungen vorgenommen habe, um sicherzustellen, dass dies korrekt funktioniert.

Ich stimme zu, dass dieses "Reveal-Modals sind so konzipiert, dass sie am Ende der Seite platziert werden, nicht im Layout" in die Dokumentation aufgenommen werden sollte, da Neulinge durch diese Auslassung sauer werden können. Ich musste das ganze Web durchsuchen, bevor ich den Kommentar von @smileyj68 sah Danke

@chimdi2000 Ab 4.3.2 ist dies kein Problem mehr, da das Javascript es für Sie verschiebt, wenn Sie es nicht an der richtigen Stelle haben, daher denke ich, dass weitere Dokumentation unnötig ist.

Danke für den Hinweis @seantimm. Ich denke, ich sollte das Theme-Framework von Shopify Foundation 4 besser aktualisieren!

@seantimm 4.3.2 hat meine Positionierungsprobleme behoben, aber da Formularelemente innerhalb der Lasche vorhanden sind und außerhalb des Formulars verschoben werden, können sie nicht mehr gesendet werden.

Als benutzerdefinierten Fix habe ich eine Einstellung für appendElement hinzugefügt, mit der sie an einer bestimmten Stelle im Dokument hinzugefügt werden können. Gibt es eine Chance, dies in einer zukünftigen Version hinzuzufügen?

Mir ist klar, dass dies ein alter Thread ist, aber seit Dezember 2014 stoße ich immer noch auf dieses Problem. Zugegeben, es ist eine einfache Lösung, aber der Sinn eines solchen Frameworks besteht darin, dass wir keine Zeit mit den grundlegenden Dingen verbringen müssen und unsere Zeit woanders konzentrieren können.

Gibt es Pläne, dies in zukünftigen Versionen zu konkretisieren? Die Möglichkeit zu wählen, ob das Modal eine feste oder absolute Position ist, scheint ein großartiges Feature zu sein. Scheint, als könnte es mit einigen Sass-Variablen getan werden.

@ smileyj68 , können Sie erklären, warum es wünschenswert ist, dass die Seite weiterhin scrollen kann, während eine Enthüllung geöffnet ist? Mir scheint, dass, wenn ein Modal geöffnet ist, der Seiteninhalt blockiert werden soll. Ist es nicht vorzuziehen, es zu reparieren und eine Überlaufeigenschaft festzulegen, damit das Modal scrollt? Wenn dies die Standardeinstellung wäre, müsste sie nicht am Ende der Seite platziert werden, was für viele CMS-Situationen eine Schwierigkeit darstellt.

Außerdem musste ich in all meinen Projekten die Reveal-Bg-Position von absolut auf fest ändern. Ich verstehe nicht, warum das jemals als absolut gesetzt werden sollte.

Ich bin heute Morgen auf ein ähnliches Problem gestoßen (mit Foundation-Rails 5.4.5) und habe es gelöst, indem ich Folgendes zu .reveal-modal hinzugefügt habe, um es zu beheben und auf der Seite zu zentrieren:

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