• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Transparenten Hintergrund

J

jorgos

Neues Mitglied
Hallo zusammen,
Da ich keine Ahnung habe, wonach ich suchen soll, werde ich wahrscheinlich das Thema zum x-ten Mail aufmachen.:mrgreen:
Wie bekomme ich einen Transparenten Hintergrund zwischen einem Dialogfeld und meinem Hintergrund hin. Wie man das z.B. in Bildergalerien hat. Hintergrund ist der, dass ich ein Klick "neben" dden Eigabedialog verhindern möchte.
Oh Mann.... war das eine Geburt.:oops:

Ich hoffe mich verständlich ausgedrückt zu haben
und hoffe auf konstruktive Antworten.:mrgreen:

thx
Jorgos
 
Willkommen im Forum.

Ein absolut positioniertes div-Element über den kompletten Viewport legen und mit der CSS-Eigenschaft z-index in den Vordergrund holen.
 
Du machst dir ein 100% Breites und 100% Hohes div, das du fixiert an die linke obere Ecke positionierst.

HTML: 
<body>
 <div id="buf">&nbsp;</div>
 Restlicher INhalt
</body>
Code: 
#buf
{
  position:fixed;
  left:0;
  top:0;
  width: 100%;
  height:100%;
  display:none;
  z-index: 50;
}
Und wenn das Dialogfeld eingeblendet wird, machst du mit document.getElementById("buf").style.display="block" das div "sichtbar".
(Der z-index des Dialogfeldes muss höher sein, als der des transparenten divs)
 
@alogheo: Das funzt soweit, aber wenn ich im dahinterliegenden Background einen Link anklicke, kann ich diesen ausführen.
Das soll allerdings verhindert werden.
Ein Idee ? :oops::mrgreen:

J.
 
Hallo nochmal,

nach langer Suche habe ich das gefunden, was ich gesucht habe.
... greybox ...:D
Ich hoffe, dass ich zum gewünschten Ziel komme.:mrgreen:

Dennoch danke für die Antworten

J.
 
Ist aber so ziemlich derselbe Ansatz.

HTML: 
<!DOCTYPE html>

<html lang="en">

    <head>
        <meta charset="utf-8" />
        <title>New</title>
        <style type="text/css">
            #overlay {
                position:fixed;
                left:0;
                top:0;
                width: 100%;
                height:100%;
                background: black;
                opacity: 0.5;
                z-index: 50;
            }
        </style>
    </head>

    <body>
        <div id="overlay">&nbsp;</div>
        <p><a href="http://www.example.org/">example</a></p>
    </body>

</html>

In welchem Browser kannst du den Link denn noch anklicken?
 
Das funzt eigentlich genau wie ich wollte.
Dennoch.. wie kann ich bei zwei übereinanderliegenden transparenten DIV´s das erste ( Im Vordergrund) NICHT Transparent machen ? :oops:

Gruß Jorgos
 
Zuletzt bearbeitet:
Das im Vordergrund liegende nicht in das andere schachteln, sondern es ebenfalls absolut positioniert direkt ins – zum Beispiel – body-Element setzen, nur mit höherem z-index.
 
Ich musste zwar dennoch eine Grafik als Hintergrund einfügen, sonnst wolltes es nicht aber dennoch hat mir deine Hilfe weitergeholfen.:mrgreen:

thx

Jorgos
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben