Remo Fritzsche: Hintergrund maskieren im IE

SELF-Forum

Hintergrund maskieren im IE

Remo Fritzsche
– Informationen zu den Bewertungsregeln

Hallo Welt

Ich arbeite an einer Webapplikation die Popups verwendet. Als Popups sind in diesem Fall einfache DIV's zu verstehen, die über dem Content liegen. Hinter dem Popup, also zum Verdecken der übrigen Masken, soll der Hintergrund dunkelgrau erscheinen.

Das habe ich wie folgt gelöst:

<div id="bgmask">&nbsp;</div>

#bgmask
{
    display: block;
    position: absolute;
    top: 0pt;
    left: 0pt;
    z-index: 90;
    width: 100%;
    height: 3388px;
    background-color: #000;
    filter:alpha(opacity=70);
    -moz-opacity: 0.7;
    visibility: hidden;
}

Das ganze gibt, wenn die visibility auf visible gestellt wird per JavaScript, eine Vieport-füllende DIV die den Hintergrund verdeckt.

Das Popup, mit z-index 100, liegt im FF darüber und es funktioniert perfekt.

Nun ist aber meine Struktur so:

  • Div bgmask
  • Div main
      - Div popup1
      - Div popup2

D.h. die Popups müssen in der DIV 'main' drin sein, welche absolut positioniert sein muss und daher natürlich automatisch einen z-index hat. Nun kriege ich es im IE nur hin, das entweder die ganze Main-Div oder dann gar nichts vor der bgmask ist.

Kann mir da jemand helfen? Hab mir da schon ewig Kopfzerbrechen gemacht.

lg
& vielen Dank

Remo

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Hintergrund maskieren im IE

    Antipitch
    – Informationen zu den Bewertungsregeln

    Hi Remo,

    kann ich gerade nicht ganz nachvollziehen.

    Das hier:

    und daher natürlich automatisch einen z-index hat

    stimmt schon mal nicht. Nur positionierte Elemente können einen z-index haben, ja. D.h. heißt aber nicht im Umkehrschluss, dass positionierte Elemente automatisch einen z-index haben. Wenn du main nur eine Positionierung gibst, behält es den z-index des Elternelements (also body, z-index ist auto). Es konstituiert auch keinen neuen, eigenen Stapel-Ebenen Kontext.

    Nimm mal die visibility Eigenschaft aus deinen divs. Alle unsichtbaren divs kriegen display:none, per Javascript schaltest du dann bgmask und das jeweilige "popup" auf display:block (und dabei also main = kein z-index, bgmask irgendwas höher 0 und die Popups irgendwas höher bgmask). Das geht, auch bei deiner Verschachtelung und auch in IEs...

    Gruß
    Antipitch

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Hintergrund maskieren im IE

      Remo Fritzsche
      – Informationen zu den Bewertungsregeln

      Hi Antipitch,

      Hey, schonmal vielen Dank für deine Ratschläge. Habe es mal versucht umzusetzen. Im Firefox gehts nach wie vor, aber im IE (6) will es nicht tun.

      Kannst dus dir unter http://remofritzsche.ch/public/rps/ mal ansehen? Hab da das Beispiel hochgeladen. Das wär super!

      lg
      & vielen Dank!

      Remo

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln