CSS: Bereiche der Website wie bei LightBox verdunkeln, wenn CSS-PopUp offen

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

...zum Beitrag

wenn ich dich richtig verstanden habe, schau mal auf "alfreds-bodega. de, --> die Bildergalerie auf der Startseite unten. Das ganze geht auch mit Text (html/ajax etc.), der grad der Verdunkelung ist einstellbar, "PopUp" ist verschiebbar usw., ist aber JS, zu finden unter: http://highslide.com/editor/

Cu Dino

...zur Antwort

ich empfehle den Foobarplayer, er ist schlank, kann Playlisten erstellen, kann mittels Gapless Crossfader auch überblenden (Zeit einstellbar), und und und... www.foobar2000.org/

...zur Antwort

in Dreamweaver geht das recht einfach, es sollte das Fenster "Eigenschaften" geöffnet sein. dann die Grafik anklicken (Markieren), dann unter Map im Eigenschaftenfenster einen Namen für die Map eintragen, dann beispielsweise das Tool für rechteckigen Hostspot anklicken und mit der Maus in der Grafik ein Rechteck an der gewünschten Stelle ziehen. Dann kannst Du im Eigenschaftenfenster den Link zum gewünschten Ziel eintragen. Bei Bedarf weitere Hotspots hinzufügen. Im übrigen gibts in Dreamweaver eine sehr gute Hilfefunktion, auch diese nutzen...

Cu Dino

...zur Antwort

es gibt genügend User welche ihrem Mailverkehr beispielsweise über web de, oder andere Anbieter abwickeln. Diese haben daher auch meist keinen Mailclienten auf ihrem Rechner eingerichtet, können ergo so nicht empfangen...

Cu Dino

...zur Antwort
Weitere Inhalte können nur Nutzer sehen, die bei uns eingeloggt sind.