boris
Beiträge: 11154
|
Titel: Halb durchsichtiges ModalPopup (opacity inheritance)
Verfasst am: Do, 18 März 2010, 21:12 |
|
|
Alle Nase lang trifft man bei Seiten auf sogenannte "ModalPopups", das sind einfach DIVs, die sich über die komplette Seite legen und so verhindern, daß man bestimmte Bereiche anklickt, solange noch etwas anderes passiert oder der User irgendeine Auswahl treffen soll.
Bei UploadPic wird so ein Ding angewendet, sobald man den Upload angestossen hat - allerdings habe ich das Ding gebaut, bevor ich folgenden Kniff kannte.
Üblicherweise sieht die "Klicksperre" so aus:
Code: |
<div id="sperre"></div>
CONTENT |
Das div "sperre" steht am Anfang der Seite und wird per CSS auf Höhe und Breite von 100% gebracht, dazu auf eine Durchsichtigkeit von 50% (oder so).
Problem: Die Transparenz wird vererbt, hat man im DIV also noch Content, z.B. eine Ladegrafik, ist diese auch transparent!
Lösung:
Code: |
<div id="sperre">
<div id="sperre_abdeckung"></div>
<img src="loading.gif" id="sperre_bild" />
</div> |
"sperre" ist das DIV, das die Seite überlagert und zwei weitere Elemente enthält: "sperre_abdeckung", das wird das DIV, das den transparenten Hintergrund erhält und "sperre_bild", das ist der eigentliche Content, der aber außerhalb von "sperre_abdeckung" sein muß, damit die Transparenz nicht vererbt wird. Über CSS und absolute Positionierung wird das ganze dann zurecht gerückt:
Code: |
#sperre {
position : absolute;
height : 100%;
width : 100%;
z-index : 999;
}
#sperre_abdeckung {
position : absolute;
height : 100%;
width : 100%;
background : white;
text-align : center;
filter : alpha(opacity=50);
-moz-opacity : 0.5;
-khtml-opacity : 0.5;
opacity : 0.5;
}
#sperre_bild {
position : absolute;
top : 50%;
left : 40%;
background : white;
} |
"sperre_abdeckung" ist transparent, "sperre_bild" nicht, durch "position: absolute" liegen beide aber übereinander, so wie es sein soll. Mit "top" und "left" beim Bild muß man ein bißchen kucken, je nachdem, wie groß das Bild ist.
Über CSS kann man dann einfach das DIV "sperre" mit "display: none" und "display: inline" (oder "block") ein- und ausschalten, um die komplette Seite (oder den Bereich, in dem sich "sperre" befindet) zu überdecken. Der z-index (muß der höchste der Seite sein) sorgt dafür, daß alles andere darunter liegt.
Und dabei direkt noch was gelernt: die üble Kombination von "filter", "-moz-opacity", "-khtml-opacity" und "opacity" sorgt dafür, daß die Transparenz in allen Browsern klappt!
____________ beehave - home of humbug ... [we can't afford to be neutral]
|
|