Wie funktioniert intro.js?

Ich habe eine on boarding Tour bei my.bonify.de. Es bietet eine ähnliche Erfahrung wie introjs.Wie funktioniert intro.js?

Wir haben dies auf eine sehr hässliche Art und Weise mit einem Ausschnitt div mit einem sehr großen Box-Schatten implementiert. Wir möchten dies verbessern und ein Overlay wie Introjs verwenden, da es eine viel bessere Performance zu haben scheint als unser Dirty Hack.

Nachdem ich this gelesen habe, verstehe ich nicht, wie introjs funktioniert, da das zu markierende Element definitiv in einem niedrigeren Stapelkontext sein sollte.

Ich habe versucht, das Verhalten mit unserer eigenen Onboarding zu replizieren, aber ich kann nicht das Element auf der Seite über das Overlay steigen.

Ich würde gerne wissen, wie Introjs dies erreicht, dachte ich, dass this block of code das Geheimnis war, aber wenn ich einen Debugger legte die Klasse nicht hinzugefügt.

Quelle

2016-08-29 rui.araujo

Bitte fügen Sie den Code, den Sie versucht haben, so dass es einfacher ist, um herauszufinden, wo Sie falsch gehen. – sahil

Einfach, Sie legen sich lediglich ein relativ Element mit einem höheren Z-Index auf einem festen Element. Beispielklassen:

.fixed-elem { 
    position:fixed; 
    top:0; 
    right:0; 
    bottom:0; 
    left:0; 
    z-index:2; 
    background: rgba(0,0,0,0.75); 
} 
.relative-elem { 
    position:relative; 
    z-index:10; 
}

Hier ist eine Arbeits Geige: https://jsfiddle.net/7ergcfvq/1/

Quelle

2016-09-09 13:53:11 scooterlord

Ich habe meinen Fehler herausgefunden. Es gab einen Elternteil mit einem definierten Z-Index, der das Problem verursacht hat. Die JSfiddle war nützlich, um das Problem zu beheben. –

froh, dass ich helfen konnte! Danke für die Punkte – scooterlord

Blick auf Demo Schritt 1 von intro.js, das <h1>Intro.js</h1> Elemente .introjs-relativePosition und .introjs-showElement, so wird es position:relative und z-index:9999999!important.

Und die <div class="intros-overlay"> ‚s z-index 999999, kleiner als <h1> & <div class="introjs-helperLayer">

Quelle

2016-09-09 08:20:02 Learning

Wie funktioniert intro.js?

Antwort

Verwandte Themen