opaques DIV über ganze Seite

[StehtimSchilf]

Hi Forum

ich möchte über meine aktuelle Seite bei einem Ereignis ein opaques popup div anzeigen lassen. Mein Problem ist, dass obwohl die die Div-Höhe auf 100% gesetzt ist, das div nur genau so hoch ist, wie das Browserfenster. Das ist natürlich nicht in meinem Sinne, denn so kann der Benutzer ja einfach runter scrollen und irgendwelche anderen Aktionen ausführen, als eben jene im "popup div".

Ich habe ein Beispiel-Datei angefügt (einfach in .html umbennen). Dann auf "Click" klicken, der die divs werden opak angezeigt, doch wenn man runterscrollt ist der Text unten ohne div-layer.

Hat jemand eine Idee?

cheerioh
SiS

 

[para_noid]

100% height meint auch nur "1x Anzeigehöhe". Damit dein PopUp immer im Sichtbereich ist, musst du die Positionierung ändern:

position: fixed;

 

[StehtimSchilf]

Du bist mein Held. Danke!

Jetzt habe ich jedoch noch folgendes Problem:

Wenn ich die DIVs verschachtele (s. Anhang oben) dann ist das "obere" div (divPopUp) ebenfalls transparent, obwohl ich dort opacity: 1 setze.

funktioniert:

	<div id="divPopUpBackground">
	</div>	
	<div id='divPopUp'>
        </div>

funktioniert nicht (Beim divPopUp scheint der Hintergrund durch):

	<div id="divPopUpBackground">
		<div id='divPopUp'>
        	</div>
	</div>

Warum ist das so? Das divPopUpBackground soll opak sein, so dass ich den Hintergrund sehe, das divPopUp soll aber den divPopUpBackground wiederum komplett "überzeichnen". Versteh ich etwas vom Konzept falsch?

Danke & Gruess
SiS

 

[para_noid]

Mit der opacy wird das wohl nicht gehen (hab da keine eigene Erfahrung). Schau dir mal diesen Thread an. Entweder nicht verschachteln oder ein PNG verwenden.