jQuery-Plugin Konflikt mit Transformation: translateY

Im eine leichten jQuery-Plugin ruft leanModal mitjQuery-Plugin Konflikt mit Transformation: translateY

Der Code für das Plugin in diesem jsfiddle enthalten ist: https://jsfiddle.net/meqtu354/2/

die All-Plugin tut, ist zum Beispiel in den jsfiddle Wenn du auf click to show popup klickst, erscheint das Popup und der Rest des Dokuments wird von einem riesigen dunklen transparenten div.

Aber aus irgendeinem Grund, wenn ich hinzufügen:

https://jsfiddle.net/meqtu354/3/ (überprüfen Sie die CSS, hinzugefügt zwei Selektoren)

jetzt transform: translateY meiner CSS, wenn Sie click to show popup klicken, decken das Overlay (dunkel transparent div), um das Pop-up auch.

ich dies für eine halbe Stunde gelesen jetzt, aber kann immer noch nicht verstehen, warum

Quelle

2016-04-21 user308553

Sie müssen außerhalb der st-Scroll-Klasse das Popup div setzen:

<div id="popup">POPUP</div> 

<div class="st-scroll"> 

    <section></section> 
    <script></script> 
    <section></section> 

</div>

Ich versuchte es in Deine Geige und es hat funktioniert. Wenn Sie eine 3d-Transformationseigenschaft anwenden, wird das div so zusammengefügt, als wäre es ein Objekt ohne Ebenen.

Quelle

2016-04-21 21:57:18 MatthewS

Das Problem ist dies eine super vereinfachte Version. Ich brauche wirklich das Popup, um darin zu sein. Was passiert, wenn ein Optionsfeld ausgewählt wird, wird durch Drücken der Seite nach oben oder unten auf die entsprechende Seite umgeschaltet. Das Popup befinden sich in einer dieser Seiten – user308553

Ok, so dass Ihre Javascript, um die Überlagerung mit dem Body-Tag anhängt. Sollte es an jedes Abschnitts-Tag einzeln angehängt werden? Da die Transform-Eigenschaft die Abschnitte zusammenführt, die das Popup enthalten, muss es Teil dieses Abschnitts sein. Wechsel: – MatthewS

Oops, ich habe nicht zu Ende ... Änderung '$ ("body") anhängen (Overlay);' auf '$ ("# st-Panel-1") anhängen (Overlay);'... Nicht sicher, ob du das willst oder nicht. – MatthewS

Sie benachbarte Selektoren verwenden, aber nicht die Auswahl der <a href=""> Sie zwischen # st-control-1 haben und .st-Scroll. dass etwas den Fluss des CSS sprengt. Der richtige benachbarte Selektor Pfad ist:

#st-control-1:checked ~ #st-panel-1 .st-scroll { transform: translateY(0%); -ms-transform: translate(0%); -webkit-transform: translate(0%); }

Verwenden Sie auch den Hersteller vorab fix in Ihrem CSS für diese Art von Eigenschaften. hoffe das hilft.

Quelle

2016-04-21 22:02:23 Micposso

Gibt es einen anderen Weg?Weil der eigentliche Code wie folgt funktioniert: Es gibt mehrere "Seiten", jede ist 100% hoch, alles unter "st-scroll", aber in verschiedenen

. Immer wenn ein Optionsfeld angeklickt wird, scrollt st-scroll mit translateY nach oben, weshalb ich # st-panel-1 nicht einfügen kann. Das Popup befindet sich nur in page1/# st-panel-1. Irgendeine Idee? Vielen Dank – user308553

jQuery-Plugin Konflikt mit Transformation: translateY

Antwort

Verwandte Themen