Florians Forum » Webmaster » Ideen für Skripte und sonstige Quellcodes » Hintergrund tranparent darstellen
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
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.
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.
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 
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! 
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:
<style type="text/css">
.modalContainer {
display:none;
}
.grayed-out {
position:fixed;
top:0%;
left:0%;
width:100%;
height:100%;
background-color:#888;
opacity:0.8;
filter:alpha(opacity=80);
}
.modal-dialog {
position:absolute;
top:50%;
top:280px;
left:50%;
width:580px;
margin-top:-175px;
margin-left:-290px;
background-color:#FFF;
}
</style>
Ich habe die Transparents erst einmal bei dem Spenden-Button unter "Info" eingebaut.
Gruß
Wolfgang
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.
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):
.modalContainer {display:none;}
.grayed-out {z-index:100;position:fixed;top:0%;left:0%;width:100%;height:100%;background-color:#888888;opacity:0.8;filter:alpha(opacity=80);}
.modal-dialog {z-index:101;position:fixed;top:48%;left:50%;width:580px;height: 320px;margin-left:-290px;margin-top:-160px;}
</style>
<div id="modalContainer" class="modalContainer">
<div class="grayed-out"></div>
<div class="modal-dialog">
<a href="javascript:void(0);" onClick="document.getElementById('modalContainer').style.display='none';">schließen</a>
TEXT---TEXT---TEXT
</div>
</div>
<a href="javascript:void(0);" onClick="document.getElementById('modalContainer').style.display='block';">anzeigen</a>
Wow. Jetzt ist alles, wie gewollt!
Bis dann und besten Dank für Deine Hilfen
Wolfgang
Freut mich, dass du es bereits hinbekommen hast.
Der Dialog sieht übrigens ziemlich gut aus.