Hier ist eine JS-Fiedel von dem, wovon ich rede:
Mein Overlay gibt den Anschein zu habenden Link deaktiviert, aber der Link bleibt anklickbar. In der Hoffnung, eine Lösung zu finden, habe ich einige Beispiele für modale Dialogfenster durchgesehen. Soweit ich das beurteilen kann, muss ich die absolute Positionierung verwenden.
Ich zögere, weil in Wirklichkeit meineInhalt wird dynamisch aufgefüllt. Es scheint eine Menge zusätzlicher Arbeit zu sein, um zu versuchen, das Overlay auf den richtigen Maßen zu halten. Ich mag es wirklich, wie es jetzt aussieht. Ich möchte nur, dass die Steuerelemente nicht angeklickt werden, während das Overlay das übergeordnete Element ist. Ist das möglich?
Antworten:
1 für die Antwort № 1In deinem Beispiel sieht es so aus, als hättest du dasInhalte, die Sie versuchen, INSIDE the overlay div zu deaktivieren. Damit dies funktioniert, müssen Sie das Overlay div ÜBER den Inhalt legen. Platzieren Sie es also nach dem Inhalt. Auf diese Weise werden Ihre Inhalte vertuscht.
Und ja, dein Overlay sollte absolut habenPositionieren Sie es so, dass Sie es in der oberen rechten Ecke des übergeordneten Containers platzieren und geben Sie ihm 100% Breite und Höhe, sodass es den gesamten übergeordneten Container abdeckt.
Sehen dieses Spiel zum Beispiel.
/>
BEARBEITEN:
Versuchen Dieses Beispiel stattdessen. Legen Sie sowohl den Inhalt als auch das Overlay in einen Behälter. Auf diese Weise nimmt das Overlay nur diesen Teil der Seite ein.
Beachten Sie, dass der Container divs (divLink1 und divLink2) haben müssen position:relative damit dies funktioniert. Laut absolute beschreibung in dieser LinkMsgstr "Das Element wird relativ zu seinem ersten positionierten (nicht statischen) Vorgängerelement positioniert." Sie müssen also die Container auf einstellen position:relative, aber bewege sie nicht wirklich.