Bildschirm abdunkeln auser DIV-Popup


Seite: 1 2
Autor Beitrag
Lucky-Luke
26.06.12 - 17:03:38 Uhr

Ich hab ein Login-Popup-Fenster, welches auch einwandfrei funktioniert. Nun möchte ich jetzt aber den restlichen Bildschirm abdunkeln. Sowas hier: http://www.graccem.com/css/css-overlay. Bei diesem Code gibt es aber den sehr großen Nacheil, dass der Inhalt des Fensters mithilfe von JavaScript erstellt wird. Ich möchte aber als Inhalt einfach eine DIV-Box einfügen. Wie geht das, ich hab lange gesucht, habs aber nie hinbekommen. Wäre sehr nett, wenn mir jemand helfen könnte.
Achtzig
27.06.12 - 08:36:15 Uhr

Du kannst das Beispiel gut modifizieren. Eigentlich mußt Du nur Dein Element mit display:none in der CSS-Datei deklarieren. Anstatt den abgedunkelten Bereich per JS zu erstellen, setzt Du dann einfach das Element auf display:block. Und zum wieder Ausblenden dann zurück auf display:none.
ixiter
27.06.12 - 11:13:55 Uhr

Es gibt nur diese Möglichkeit, den Bildschirm "abzudunkeln". Und immer ist dazu ein kleines Stückchen Javascript nötig.

________________
ixiter.com
Durchsuch die Pytal Userseiten
Webtools
Google hilft dir weiter
Twitter mich
Achtzig
27.06.12 - 13:21:21 Uhr

JS stört ihn wohl auch nicht, wenn ich das richtig verstanden habe. Nur möchte er wohl das Element nicht mit JS erstellen sondern ein eigens div nehmen.
anarchopunk
27.06.12 - 13:30:04 Uhr

Dann passt doch alles(?)
Lucky-Luke
28.06.12 - 15:57:01 Uhr

Danke, für eure Antworten. Ich hab das ganze mit einer 1x1 Pixel großen Grafik gelöst, welche im Hintergrund angezeigt wird (Schaut es euch mal an: http://www.file-upload.net/download-4487161/Loginbox.rar.html).
ixiter
01.07.12 - 04:38:53 Uhr

Du kannst deinem "shade" auch einfach eine Hintergrundfarbe und eine Transparenz (opacity) geben. Du brauchst kein Hintergrundbild.

Füll die Seite mal so weit mit Inhalt, dass du hoch/runter scrollen kannst. Lass dann mal deine Loginbox anzeigen und scroll nach unten.



________________
ixiter.com
Durchsuch die Pytal Userseiten
Webtools
Google hilft dir weiter
Twitter mich
Teegee
04.07.12 - 11:15:31 Uhr

opacity funktioniert (nocht) nicht (?) mit allen Browsern richtig. Die meisten stellen einfach eine Fläche mit der angegebenen Farbe dar.

Eine Möglichkeit wie ich es gelöst hätte wäre ein Element fixed zu positionieren welches den ganzen bereich güllt. Zusätzlich mit z-index:1000000000 (einfach so dass es zu oberst liegt in den Vordergrund und dann darauf die Loginbox mit z-index: 1000000001.

Schon hat man alles gelöst.
Lucky-Luke
06.07.12 - 16:43:22 Uhr

Ich hab das so gemacht, dass, wenn das div geöffnet wird, verschwinden die Scrolleisten und der Inhalt geht ganz nach oben.
SammysHP
07.07.12 - 08:10:35 Uhr

@teegee
Geht der z-index nicht nur bis 1000 oder so?

edit: Ok, gibt wohl doch keine Beschränkung (bis auf die technische bei 2147483647).
Seite: 1 2

- Obige Beiträge stellen keine Äußerung oder Meinung von Pytal oder dessen Betreiber dar -