Introjs: bei der Verwendung von Intro Hintergrundbilder erscheinen über Popup

Ich benutze Introjs, aber ich habe ein Problem in einigen Seiten der Website. Ich habe ein Popup, das vor der Seite erscheint, aber wenn ich das Intro aufrufe und auf Elemente in dem Popup zeige, erscheinen die Bilder im Hintergrund über dem Popup (siehe Bild), ohne das Intro erscheint das Popup gut. Und in anderen Seiten habe ich das gleiche, aber alles funktioniert gutIntrojs: bei der Verwendung von Intro Hintergrundbilder erscheinen über Popup

das CSS meines Popup ist wie folgt:

#popup_modal { 
    /* position: fixed; */ 
    position: absolute !important; 
    height: 100%; 
    top: 50px; 
    width: 98%; 
    left: 1%; 
    z-index: 99999999; 
    overflow: hidden; 
} 
#popup { 
    padding: 20px; 
    border: 1px solid #007793; 
    width: 470px !important; 
    min-height: 162px; 
    margin-top: 100px; 
    margin-left: auto; 
    margin-right: auto; 
    background-color: #F6F6F6; 
    border-radius: 4px; 
    box-shadow: 5px 5px 20px #666; 
}

EDIT:

#popup_modal { 
    /* position: fixed; */ 
    position: absolute !important; 
    height: 100%; 
    top: 50px; 
    width: 98%; 
    left: 1%; 
    z-index: 9999 !important; 
    overflow: hidden; 
} 
#popup { 
    padding: 20px; 
    border: 1px solid #007793; 
    width: 470px !important; 
    min-height: 162px; 
    margin-top: 100px; 
    margin-left: auto; 
    margin-right: auto; 
    background-color: #F6F6F6; 
    border-radius: 4px; 
    box-shadow: 5px 5px 20px #666; 
}

Introjs css:

.introjs-helperLayer { 
    position: absolute; 
    z-index: 9999998; 
    background-color: #FFF; 
    background-color: rgba(255,255,255,.9); 
    border: 1px solid #777; 
    border: 1px solid rgba(0,0,0,.5); 
    border-radius: 4px; 
    box-shadow: 0 2px 15px rgba(0,0,0,.4); 
    -webkit-transition: all 0.3s ease-out; 
    -moz-transition: all 0.3s ease-out; 
    -ms-transition: all 0.3s ease-out; 
    -o-transition: all 0.3s ease-out; 
    transition: all 0.3s ease-out; 
}

Quelle

2016-08-10 terrorista

Versuchen Sie, eine position: relative auf die CSS-Zugabe für #popup zu Schichtung Kraft zu berechnen:

#popup { 
 
    padding: 20px; 
 
    border: 1px solid #007793; 
 
    width: 470px !important; 
 
    min-height: 162px; 
 
    margin-top: 100px; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    background-color: #F6F6F6; 
 
    border-radius: 4px; 
 
    box-shadow: 5px 5px 20px #666; 
 
    z-index: 999999999; 
 
    position: relative; // Default value is "static" but "relative" will cause layering to occur 
 
}

Z-Indexwerte werden in der Regel in statisch positionierte Elemente ignoriert, was seltsam Layering, wenn Sie andere Elemente verwenden, die verschiedene Arten der Positionierung verwenden.

Quelle

2016-08-10 16:24:06

es passiert das gleiche:/ – terrorista

Ich stelle fest, dass Sie die Frage nach der z-Index-Wert von '# popup' entfernen bearbeitet. Du wirst das auch dort haben wollen, wie in meinem Beispiel. Wenn es immer noch nicht funktioniert, dann wird es schwierig sein, etwas anderes vorzuschlagen, ohne das CSS für die Elemente zu prüfen, die durchgehen. –

Es ist auch möglich, dass intro.js einen Z-Index auf das Popup setzt, wodurch es von den anderen Elementen überlagert wird. Wenn das der Fall ist, können Sie es mit! Wichtig festlegen und sehen, ob das hilft (zumindest um festzustellen, warum es passiert). Auch das ist schwer zu sagen, ohne das CSS zu untersuchen. Wenn Sie ein JSFiddle-Beispiel bereitstellen oder uns auf eine Seite verweisen können, auf der sich diese befindet, würde das eine Menge helfen. –

In meinem Fall hatte ich diese

Inline-Stil in li Elemente der Seitenleiste Nach dem Hinzufügen:; und das Hinzufügen von Eigentum (style = "background-color # 347D87 wichtig!") 'Position: absolute' der Klasse 'introjs-fixedTooltip' in der ursprünglichen introjs.css Datei IT hat funktioniert !!!