Benutzername    Passwort    Autologin    
  Passwort vergessen       Registrieren  
beeForum Foren-übersicht » hal9000
Neues Thema eröffnen   Neue Antwort erstellen Hervorhebung entfernen


Halb durchsichtiges ModalPopup (opacity inheritance)
Vorheriges Thema anzeigen :: Nächstes Thema anzeigen  
Autor Nachricht
boris



Beiträge: 10130

Titel: Halb durchsichtiges ModalPopup (opacity inheritance)
Verfasst am: Do, 18 März 2010, 22:12
Beitrag
Antworten mit Zitat

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]

Nach oben
Private Nachricht senden Website dieses Benutzers besuchen Rang:godmode methusalem 3. platz professioneller Sportangler Profi-Winzer (7x Hamm) Arcade-Meister, Rang 16 rainbow-cup
Beiträge der letzten Zeit anzeigen:   
Neues Thema eröffnen   Neue Antwort erstellen    beeForum Foren-übersicht » hal9000 Seite 1 von 1
Gehe zu:  



ähnliche Beiträge
Thema Autor Forum Antworten Verfasst am
Keine neuen Beiträge Heinrich Böll - Billard um halb zehn boris kühnes mittelscharfer 0 Fr, 04 Okt 2013, 09:32 Letzten Beitrag anzeigen


Schreiben: nein. Antworten: nein. Bearbeiten: nein. Löschen: nein. Umfragen: nein.
phpBB © phpBB Group | impressum