Hintergrund tranparent darstellen

Florians Forum � Webmaster � Ideen f�r Skripte und sonstige Quellcodes � Hintergrund tranparent darstellen

Themen-Einstellungen

Thema drucken

Bereich wechseln

#1 | Hintergrund tranparent darstellen datum

05.06.2013 23:11

Hallo Florian,
hast Du dazu eine Idee:
Ich möchte z.B. Ein Fenster aufrufen und Hintergrund soll einfach transparent erscheinen.
Geht das mit einfachen Mitteln oder muss hier ein Script her?

Ich habe es so hinbekommen, dass das Fenster selber transparent erscheint (beim Überfahren mit der Maus) oder das der gesamte Hintergrund (body) transparent wird, aber nicht so wie beschrieben.

class="trans_win"

<style type="text/css">

.trans_win {opacity:0.6;filter:alpha(opacity=60);}
.trans_win:hover {opacity:1.0;filter:alpha(opacity=100);}

</style>

Gruß
Wolfgang

Forum: Der Treffpunkt für Hilfe, Tricks & Tipps

Antworten

#2 | RE: Hintergrund tranparent darstellen datum

07.06.2013 23:05 (zuletzt bearbeitet: 07.06.2013 23:06)

florian-zier

Administrator

Informationen anzeigen

Beitr�ge:	837
Punkte:	1895
Registriert seit:	19.04.2007
Wohnort:	Oberkirch

Hallo Wolfgang,
meinst du so etwas, wie der ausgegraute Hintergrund bei einem modalen Dialog?
Dann ben�tigst du einen kleinen Trick, im Grunde muss ein weiterer Container hinter dem Dialog �ber die komplette Seite gelegt werden.

Hier habe ich mal eine kleine Beispiel-Seite erstellt, welche das Vorgehen verdeutlichen soll.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
 
<!DOCTYPE html>
<html>
 
<head>
	<meta charset="UTF-8">
	<title>Modaler Dialog</title>
 
	<style type="text/css">
		.grayed-out {
			position:fixed;
			top:0;
			left:0;
			width:100%;
			height:100%;
			background-color:#888;
			opacity:0.6;
			filter:alpha(opacity=60);
 
			display:none;
		}
		.modal-dialog {
			position:absolute;
			top:50%;
			left:50%;
			width:500px;
			height:350px;
			margin-left:-250px;
			margin-top:-175px;
			background-color:#FFF;
		}
	</style>
</head>
<body>
 

<div id="modalContainer" class="grayed-out">
	<div class="modal-dialog">
		<a href="javascript:void(0);" onclick="document.getElementById('modalContainer').style.display='none';">schließen</a>
	</div>
</div>
 
<a href="javascript:void(0);" onclick="document.getElementById('modalContainer').style.display='block';">anzeigen</a>
 

</body>
</html>
 

Der Dialog selbst muss nicht zwingend innerhalb des Hintergrund-Containers liegen.
Allerdings sollte dann jeweils ein z-index-Wert f�r Dialog und dessen Hintergrund vergeben werden, damit sie sich nicht aus Versehen in der falschen Reihenfolge �berlagern.

Evtl. k�nnte dich auch die jQuery-UI-Bibliothek interessieren.
�ber den Link gelangst du direkt zu einem kleinen Beispiel-Dialog.

Beim heraussuchen der Website bin ich zuf�llig noch �ber eine Auflistung von 13 Very Useful jQuery Modal Plugins gesto�en. Da sind ein paar ansehnliche Bibliotheken dabei.

Allerdings w�rden alle Plugins zus�tzlich zum eigenen Skript eine eingebundene jQuery-Bibliothek ben�tigen.
Wenn es nicht all zu umfangreich werden soll, spricht also nichts gegen eine eigene kleine Implementierung.
Daf�r musst du es dann eben noch ein wenig auf die gew�nschte Seite anpassen.

florian-zier hat folgende Dateien an diesen Beitrag angeh�ngt

Dialog.zip

florian-zier hat folgende Bilder an diesen Beitrag angeh�ngt

modalDialog.png

_________________
Florian Zier
Administrator
http://www.florian-zier.de

Antworten

#3 | RE: Hintergrund tranparent darstellen datum

09.06.2013 19:01

Hallo Florian,
ich habe Dein Script ausprobiert.
Der Hintergrund und das geöffnete Fenster sind beide transparent!

Auch wenn ich für "modal-Dialog"
opacity:1.0;
filter:alpha(opacity=100);

Mit "z-index:1;" bin ich auch nicht weitergekommen.

Wo liegt der Fehler?

Wolfgang

Forum: Der Treffpunkt für Hilfe, Tricks & Tipps

Antworten

#4 | RE: Hintergrund tranparent darstellen datum

09.06.2013 23:40

Hallo Wolfgang,
da habe ich wohl die Vererbung nicht beachtet.
Die Transparenz des �u�eren Containers wurde wohl auch f�r den inneren verwendet, auch wenn es wie in meinem Screenshot zu sehen bei mit nicht in diesem Moment zu sehen war.

Ich habe nun eine corrected Version bereitgestellt.
Dort wird die Transparenz nochmals explizit im Dialog selbst wieder entfernt (bzw. vollste Sichtbarkeit).

Zudem habe ich eine weitere Datei (nested) erstellt, bei welcher der Transparenz-Wert nicht mehr zwingend �berschrieben werden muss.
Es existiert nun ein weiterer Container au�en herum, welcher die anderen beiden enth�lt.
Daf�r ist das Dialog-DIV nicht mehr im ausgegrauten DIV enthalten.
Au�erdem habe ich darin eine Toggle-Funktion erstellt, welche den Dialog ein- bzw. wieder ausblendet, eben immer die Sichtbarkeit gerade umkehrt.

Als letzte Version existiert eine Variante (zindex), bei welcher die DIVs nebeneinander liegen, ohne in einem anderen enthalten zu sein.
Hier habe ich exemplarisch eine gesonderte Einblende- bzw. Ausblende-Funktion erstellt.
Es w�rde auch ohne z-index funktionieren, da der Dialog in der Reihenfolge erst nach dem grauen DIV folgt und damit dar�ber angezeigt wird.
W�rdest du dem Dialog einen kleineren z-index als dem grauen DIV zuweisen, w�rde er dahinter eingeblendet.
Eigentlich wird er erst wichtig, wenn es andere Elemente auf der Website gibt, die �hnlich positioniert wurden und m�glicherweise auch einen z-index besitzen.
Die Werte sind h�ufig relativ hoch, �ber 100 ist wohl keine Seltenheit, vor Kurzem habe ich erst Komponenten �ber 1.000 gesehen (z.B. Modale Dialoge mit Bootstrap besitzen 1.050).

Spontan w�rde ich im Moment zur zweiten Variante tendieren, also nested.
Der Dialog kann einfach komplett als Block irgendwo eingesetzt werden, nicht zwei separat nebeneinander liegende Container.
Die Toggle-Funktion ist vielleicht Geschmackssache, aber warum auch nicht wenn sie immer eindeutig ist.
D.h. dass also nie ein Link einen zweiten Dialog zus�tzlich togglen kann, sondern bei ge�ffnetem Dialog dieser erst geschlossen werden muss, bevor ein anderer Link f�r das Togglen eines zweiten erreichbar wird.

Probier einfach alle Varianten einmal kurz aus. Ansonsten gibt es vielleicht auch noch elegantere Alternativen im Netz zu finden.
Bei gr��eren Projekten empfiehlt sich dann evtl. auch doch eher eine fertige Bibliothek.
Die Dialoge von jQueryUI k�nnen mit ein wenig CSS vielleicht ziemlich gut aufgeh�bscht werden.

Gute Nacht!

florian-zier hat folgende Dateien an diesen Beitrag angeh�ngt

ModalDialog.zip

_________________
Florian Zier
Administrator
http://www.florian-zier.de

Antworten

#5 | RE: Hintergrund tranparent darstellen datum

11.06.2013 22:02 (zuletzt bearbeitet: 11.06.2013 22:22)

Hallo Florian,
ich habe alle 3 Variationen im Standard Template ausprobiert.

Version "corrected" hat eine super Funktion.
Hier bleibt der Text in der Bildschirmmitte , auch wenn gescrollt wird und der Hintergrund wandert!
Leider wird hier der Text oder ein Bild nicht zu 100% ohne Transparenz wiedergegeben (Ist mir beim Einbau aufgefallen).
Wird die Transparenz für den Hintergrund verändert, verändert sie sich auch im Vordergrund!

Abhilfe schafft ein zusätzlicher Container, wie in Version "nested". Allerdings wird hier der Text nicht zur Bildschirmmitte gescrollt, sondern zur Seitenmitte, dass heißt bei großen Seiten, ziemlich weit unten.
Schade!

Lässt sich die Version "nested" so umbauen, dass der Text in der Bildschirmmitte bleibt, auch wenn gescrollt wird?

Ich habe erstmal die CSS wie folgt einstellen müssen:

Ich habe die Transparents erst einmal bei dem Spenden-Button unter "Info" eingebaut.

Gruß
Wolfgang

Forum: Der Treffpunkt für Hilfe, Tricks & Tipps

Antworten

#6 | RE: Hintergrund tranparent darstellen datum

12.06.2013 00:06 (zuletzt bearbeitet: 12.06.2013 00:10)

Hallo Wolfgang,
schnelle Abhilfe schafft dir vielleicht die Version corrected, mit dem Unterschied, dass die Klasse .modal-dialog statt position:absolute; den Wert position:fixed; zugewiesen bekommt.
Ansonsten richtet sich die Ausrichtung ggf. doch noch an �bergeordnete Container und scrollt vor allem mit.
Macht der Gewohnheit und f�llt nicht sofort auf.

So ganz sind wir den z-index aber auch nicht los,
Der untere Spenden-Button und Info-Link sind auch bei dem bei dir aktuell eingebundenen nested trotzdem klickbar.
Das liegt daran, dass das Formular um den Button absolut positioniert ist und in der HTML-Struktur weiter hinten liegt.
Es wird dadurch weiter vorne, also auch vor dem grauen Hitnergrund angezeigt.
Gebe aktuell der Klasse .grayed-out einen z-index > 0 und der graue Hintergrund legt sich wieder korrekt davor (evtl. ein etwas h�herer Wert als Puffer vor weiterer ungewollter �berlagerung - 100, 500...).
Dadurch erscheint allerdings der Dialog selbst ebenfalls dahinter, also bekommt .modal-dialog auch einen mindestens genauso gro�en (besser gr��eren) z-index zugewiesen.

Falls du wie ganz oben die corrected-Version nochmals korrigiert hast, dann erh�lt statt .grayed-out einfach .modalContainer einen z-index zugewiesen.

Ich hoffe, dass ich mich jetzt auf die Schnelle nicht vertan habe.
Das Auswirken der Tansparenz auf Elemente im Vordergrund kann ich leider immer noch nicht so feststellen.
Das einzige war nur, dass sich sp�ter vorkommende absolut positionierte Elemente wie der Spenden-Button unten in den Vordergrundgedr�ngt haben.
Ich h�nge mal einen Screenshot an, damit du es so siehst wie ich.
Falls dein Transparenz-Problem weiterhin besteht k�nntest du evtl. auch nochmals einen Screenshot posten.

Es k�nnte sein, dass die Seiten bei uns anders gerendert werden.
Deswegen habe ich das aber nochmals mit Chrome gegengecheckt, IE kann ich inzwischen nicht mehr testen.

florian-zier hat folgende Bilder an diesen Beitrag angeh�ngt

dialog.png

_________________
Florian Zier
Administrator
http://www.florian-zier.de

Antworten

#7 | RE: Hintergrund tranparent darstellen datum

12.06.2013 18:05

Zitat von florian-zier im Beitrag #6
Hallo Wolfgang,
schnelle Abhilfe schafft dir vielleicht die Version corrected, mit dem Unterschied, dass die Klasse .modal-dialog statt position:absolute; den Wert position:fixed; zugewiesen bekommt.
Ansonsten richtet sich die Ausrichtung ggf. doch noch an übergeordnete Container und scrollt vor allem mit.
Macht der Gewohnheit und fällt nicht sofort auf.

Hallo Florian,
ich hatte gestern noch spät einiges ausprobiert und hatte mit einer Mischung aus "corrected", "nested" und wie Du schreibst, mit Position:fixed den Erfolg!
Ich habe eben noch Deinen Vorschlag mit dem "z-index" umgesetzt (die anderen Button sind jetzt auch transparent, super!).

Es sieht jetzt bei mir wie folgt aus (Standard-Template):

Wow. Jetzt ist alles, wie gewollt!

Bis dann und besten Dank für Deine Hilfen
Wolfgang

Forum: Der Treffpunkt für Hilfe, Tricks & Tipps

Antworten

#8 | RE: Hintergrund tranparent darstellen datum

12.06.2013 20:12

Freut mich, dass du es bereits hinbekommen hast.
Der Dialog sieht �brigens ziemlich gut aus.

_________________
Florian Zier
Administrator
http://www.florian-zier.de

Antworten

Super Zoom für Bilder - Mit Klick � � Webseiten transparent einblenden

�hnliche Themen

Antworten

Letzter Beitrag

Hintergrundwechsler für body und header
Erstellt im Forum Ideen f�r Skripte und sonstige Quellcodes von Wolfgang 1 30.12.2015 06:54
Wolfgang • Zugriffe: 522
Browser-Tab farbig darstellen
Erstellt im Forum Ideen f�r Skripte und sonstige Quellcodes von Wolfgang 2 23.01.2013 00:02
Wolfgang • Zugriffe: 562
Syntax-Highlighting - DO IT YOURSELF
Erstellt im Forum Funktionen & Template von florian-zier 13 25.03.2015 00:25
florian-zier • Zugriffe: 1382
Hintergrundwechsler für Uhrzeiten
Erstellt im Forum Homepage & Anderes von florian-zier 0 28.09.2011 20:23
florian-zier • Zugriffe: 697
"Für Beitrag bedanken"-Button (next Generation)
Erstellt im Forum Funktionen & Template von florian-zier 41 26.07.2015 17:39
DJ-Frechdax • Zugriffe: 3720
Online-Liste anzeigen
Erstellt im Forum Funktionen & Template von Wolfgang 3 06.04.2011 20:57
Wolfgang • Zugriffe: 701
Grafik-Darstellung ?
Erstellt im Forum Website & Admin von Emanuel 4 10.12.2008 23:27
Emanuel • Zugriffe: 1147
Styleswitcher
Erstellt im Forum Sonstiges von Emanuel 5 01.09.2022 11:24
Pirs • Zugriffe: 803
FAQ
Erstellt im Forum Wichtige Infos von florian-zier 1 26.04.2007 20:53
Calli • Zugriffe: 964

Bitte geben Sie einen Grund f�r die Verwarnung an