Hallo,
ich versuche gerade einen Weg zu finden, wie ich den Rest einer Seite verdunkeln kann (er soll nicht komplett verschwinden sondern noch durchschimmern), während ich eine Art "PopUp" offen habe.
Eine Art "PopUp" daher, da es sich um eine Box handelt die komplett mit CSS realisiert wurde und ohne Java-Script.
Aber bevor ich es erkläre gebe ich lieber das "Pop-Up"-Gerüst an.
<div id="infoMenu">
<input type="checkbox" id="linkbox" class="popUpControl">
<label for="linkbox">
<div class="infoBubble"></div><!--END .infoBubble-->
<div class="infoBox">
Inhaltstext:
</div><!--END .infoBox -->
</label><!--END linkbox -->
</div> <!--END infoMenu-->
Das "Pop-Up" - Fenster, was bei "gecheckter" Checkbox aufgeht ist die "infoBox", der ich ihre Position absolute mitgegeben habe und die den z-index: 100 hat. Dies ist zwar von der Zahl her eher übertrieben, da normal 2 oder 3 auch reichen würden, aber egal.
Nun will ich noch über alles was unter der Box ist und je nach Bedarf den infoBubble (der zu drückende Button) einen Schleier legen.
Meine Versuche es damit zu realisieren einen Weiteren Layer einblenden zu lassen oder der InfoBox einen angepassten Rahmen (border) zu geben würden zwar technisch auch gehen.
Doch da ein "Klick" bzw. "Drücken" auf diese Stellen ebenfalls für ein Schließen der infoBox führt ist es eher ungünstig.
Könnte mir jemand ggf. einen Tipp geben wie ich es so umsetzen kann, dass die Box sich nur bei Klick auf die Infobox und/oder einem Button auf dieser schließt?
Perfekt wäre natürlich eine rein CSS basierte Lösung, da ich die Box nicht mit JavaScript mache, sondern sie nur als HTML bzw. JSP-Code zur Verfügung steht.
Bisher habe ich hierfür nur die Begriffe Lightbox, Litebox, Shadowbox und Slimbox gelesen. Wobei diese vorwiegend nur für Bilder genutzt werden und es sich dabei um JS - Scripte handeln soll.
Aber wie bereits erwähnt habe ich ja vor keine Grafik so darzustellen sondern einen Teil aus einer Website.
Wäre super, wenn mir jemand helfen bzw. einen Tipp geben könnte, wo ich noch nachsehen kann. ^^
Chiru