Overlay in IE 7 zu verhindern, mit Kontrollen im Hintergrund Messing

Question

Ich habe nicht ein einzigartiges Problem bekam, sondern für das Leben von mir, ich kann nicht herausfinden, was ich falsch mache.

Ich habe eine Seite, die eine Reihe von Abschnitten hat. Ein Teil des Abschnitts ist ein wenig Bild. Wenn das Bild geklickt wird, möchte ich eine benutzerdefinierte Kontrolle zeigen. die Steuerung zeigt, ist trivial, den Z-Index etwas höher gesetzt ist die Steuerung am Anfang von allem zu gewährleisten.

Der Benutzer kann jedoch nach wie vor mit den Abschnitten hinter der Steuerung in Wechselwirkung treten.

Um das zu stoppen, habe ich eine „Decke“. Im Grunde ein div, dass die Größe des Dokuments mit dem folgende CSS (in jQuery-Syntax) ist -

{
  position: 'absolute',
  top: 0,
  left: 0,
  width: '100%',
  height: $(document).height(),
  display: 'none',
  zIndex: 1,
  backgroundColor: '#FF0000'
};

Ja ... der Hintergrund ist rot, so kann ich es für den Test sehen. I set Opazität 0,1 (light blur). Ich habe dann den Z-Index meines Custom Controls 2, so dass es auf der Oberseite der Decke ist.

Das funktioniert perfekt in FireFox, Chrome und Safari, aber nicht im Internet Explorer.

Die individuelle Steuerung ist kein Kind von der Decke.

Das Ziel ist, das folgende Dokument von Decke auf der Decke mit ihr zu interagieren mit Kontrolle abgedeckt haben. Dies ist, was ich auf allen Browsern außer IE bekommen. Auf das heißt ... es geht Dokument mit Kontrolle und beide sind von der Decke bedeckt.

Antwort

scunliffe war in der Nähe (in einem Kommentar, antwortete ich einen Link kann nicht). Die individuelle Steuerung ist innerhalb eines relativ positionierten div (mehrere nach unten tatsächlich). die Decke war einfach auf das Ende des Körpers angehängt. Deshalb war es außerhalb der relativ positionierte div und einen eigenen z-index-Stack gestartet (wie dokumentiert hier ). Da IE 6/7 in dieser Hinsicht aufgebrochen werden, egal, was habe ich den Z-Index zu, wäre es immer unter der Decke sein.

Also zog ich die Decke das erste Kind im Inneren des relativ positioniert div zu sein. Dies ist nicht 100% vollständig noch da, wenn Sie blättern (was ich kann mit dieser Lösung nicht stoppen), die Decke div nur die Höhe des sichtbaren Inhalts. Ich muß nun herausfinden, wie die komplette Höhe des Inhalts zu erhalten (sichtbare und nicht sichtbare).

Answer 1

scunliffe war in der Nähe (in einem Kommentar, antwortete ich einen Link kann nicht). Die individuelle Steuerung ist innerhalb eines relativ positionierten div (mehrere nach unten tatsächlich). die Decke war einfach auf das Ende des Körpers angehängt. Deshalb war es außerhalb der relativ positionierte div und einen eigenen z-index-Stack gestartet (wie dokumentiert hier ). Da IE 6/7 in dieser Hinsicht aufgebrochen werden, egal, was habe ich den Z-Index zu, wäre es immer unter der Decke sein.

Also zog ich die Decke das erste Kind im Inneren des relativ positioniert div zu sein. Dies ist nicht 100% vollständig noch da, wenn Sie blättern (was ich kann mit dieser Lösung nicht stoppen), die Decke div nur die Höhe des sichtbaren Inhalts. Ich muß nun herausfinden, wie die komplette Höhe des Inhalts zu erhalten (sichtbare und nicht sichtbare).

Answer 2

Machen Sie es sich zur Gewohnheit, einen viel höheren Z-Index aufzunehmen. Verwenden Sie wie folgt vor:

z-index:20000;

Und natürlich auf den z-Index für das benutzerdefinierte Steuerelement. Der hohe z-index ähnliches Problem behoben.

Answer 3

Ich hatte Probleme mit diesem auch. Der einzige Weg, fand ich eine undurchlässige Abschirmung schafft, war ein Bild im Hintergrund des DIV (ein transparentes GIF arbeitete für mich) zu setzen. Und dann muss man noch Tastaturereignisse abfangen zu verhindern, dass die Steuerung der Navigation.

Answer 4

Hier ist, wie wir Opazität auf unser Projekt zu tun:

.SomeStyle
{
filter:alpha(opacity=10);
-moz-opacity:.10;
opacity:.10;
}

Das testet fein auf IE 6 und 7 und FF 2 & 3. Ich glaube, dass es in Safari funktioniert auch.

Answer 5

Sie erwähnen nicht, was die individuelle Kontrolle jedoch besteht, wenn Sie ein ausgewähltes Element in Ihrer benutzerdefinierten Kontrolle haben, dann bewirkt dies modal Probleme in dh (cant remember, wenn sie das Problem in IE7 festgelegt). Wie dem auch sei, diese Informationen können Sie Ihr Problem lösen helfen. Youll brauchen eine iframe Shim es zeigt, die durch die Überlagerung zu verhindern. Viele Skripte tun dies für Sie.

mehr info

und hier

Answer 6

Just meinen Hut werfen in ...

ich dies nur vor kurzer Zeit umgesetzt und ich:

div#shade-box {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: #000;
    opacity: 0.7;
    filter: Alpha(opacity=70);
}

Natürlich können Sie die Hintergrundfarbe ändern oder entfernen. Ich war das Hinzufügen dieses div auf das DOM durch Javascript, damit ich nicht um den z-Index kümmern.

Bekannte in FF und IE7 zu arbeiten.