✔ MooTools - Überblendungseffekt von document.body

T

Tobi81

Mitglied
Ich habe von http://www.peterkroener.de/mootools-fuer-die-massen-teil-5-programmieren-im-mootools-stil/ eine MooTools Fensteranwendung.
Leider funktioniert das Ausblenden des Browserfensters nicht wie gewünscht. Andere JavaScript Inhalte der Webseite bleiben aktiv und sichtbar.
Funktionieren kann das ganze aber, denn bei der bekannten Slimbox funktioniert das ganze perfekt, und die basiert auch auf MooTools.

Vielleicht hat jemand eine Idee wie man das hinbekommt?

Ich habe mal ein Beispiel vorbereitet, in dem man ganz gut sieht was ich meine:
http://www.gctools.de/mootools/test.html

Bei Klick auf den ersten Link "Click here" öffnet sich die Slimbox. Der Hintergrund wird schön ausgegraut.
Beim Klick auf den zweiten Link mit dem tollen Namen "Link" öffnet sich mein Fenster, aber die JavaScript Inhalte unten bleiben leider im Vordergrund und sind sogar benutzbar (Mausrad auf den Grafiken benutzen, oder ein Bild aussen anklicken). :-(

Der Einfachheit halber, befindet sich das JavaScript zum Popup direkt in der HTML Datei. Die betreffende Stelle ist:
Code: 
   // Das Overlay
   addOverlay: function(){
      this.overlay = new Element('div', {
         'class': 'popupOverlay',
         'styles': {
         'opacity': 0,
         'height': this.options.container.getSize().y
      }
   });
   this.overlay.inject(document.body, 'top');
   this.overlay.tween('opacity', 0.75);
}
Sollte sich das Beispiel jemand runterladen wollen, habe ich alle erforderlichen Dateien auch in einem Zip-Archiv hochgeladen:
http://www.gctools.de/mootools/window.zip


Ich freue mich über jeden Hinweis.

Viele Grüße,
Tobias
 
Moin Tobi,

dem popupOverlay fehlt es an einem z-index der höher ist als bei allem anderen, was im Moment sichtbar ist, und tiefer als beim Popup.
Damit einhergehend benötigt popupOverlay auch eine Angabe zu position, damit der Browser veranlassst wird, den z-index umzusetzen.
 
Hallo Sven,

vielen Dank für deine Antwort.

Ich habe die Hinweise von dir eingebaut:
Code: 
addOverlay: function(){
    this.overlay = new Element('div', {
        'class': 'popupOverlay',
        'z-index': '10000000',
        'position': 'absolute',
        'styles': {
            'opacity': 0,
            'height': this.options.container.getSize().y
        }
    });
    this.overlay.inject(this.options.container, 'top');
    this.overlay.tween('opacity', 0.75);
}
Nun erhalte ich folgenden Div im HTML Code:
HTML: 
<body>
<div class="popupOverlay" z-index="10000001" position="absolute" style="height: 790px; visibility: visible; zoom: 1; opacity: 0.75; "></div>
Das hat aber leider die gleichen Auswirkungen. Nicht alles ist ist abgedunkelt. :-(

Habe ich was falsch gemacht?

Vielen Dank!
 
Hallo Sven,

vielen Dank für deine Hilfe
Ist eigentlich klar, dass die Elemente in's CSS müssen. Das ging dann wohl doch zu schnell.

BTW: Hier steht leider nicht wie man dir ein Bier ausgeben kann! :p

Vielen Dank,
Tobias
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück