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
2 Antworten
:P Habe ich glatt übersehen. Manchmal findet man die Sachen nicht auch wenn sie direkt vor deiner Nase sind.
Also. So wie ich das verstanden habe ist
<div id="infoMenu">
dein popup Container.
Um den Rest abzudunkeln würde ich folgendes versuchen:
<style>
<!--
#wrapperContainer{
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
background-color:black;
opacity:0.5;
}
-->
</style>
<div id='wrapperContainer'>
<div id="infoMenu"></div> // dein popup
</div>
Damit das klappt, darf das div in dem
<div id='wrapperContainer'>
eingebettet ist nicht 'position:relative;' sein.
Ich hoffe ich habe das so richtig verstanden. Versuchs mal und schreib mir obs geklappt hat.
Wie das meiste bei mir sind mindestens die Div-Container die das Design auslegen position=absolute; festgelegt.
Im wrapperContainer müssten dann alle anderen Div-Boxen mit Inhalt sein, oder ihre ich mich da?
Wenn ich den Code aber gerade richtig lese und verstehe, würde ich damit gerade nicht dafür sorgen, dass einfach dauerhaft der Bereich dunkel ist und nicht nur dann wenn die InfoBox (Popup) sichtbar ist?
Korrigiere mich, wenn ich gerade falsch liege und etwas falsch verstehe. ^^°
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
Danke, die Seite hatte ich selbst noch nicht gefunden.
Der Ansatz erscheint mir ähnlich zu sein, wie ich es haben will. Vielleicht nur so, dass der User die Box nicht verschieben sollte.
Ich muss mal gucken ob ich sowas nutzen kann. ^^
Vorerst bedanke ich mich erst einmal. Die Seite wird mir sicher auf die ein oder andere Art weiterhelfen..
Chiru