Verwenden des Z-Index im Web Widget (Classic)

Zendesk Web Widget (Classic) bietet zahlreiche Einstellungs- und Anpassungsoptionen. Manchmal müssen Sie die Stapelreihenfolge des Web Widgets (Classic) im Verhältnis zu den anderen Inhalten Ihrer Webseite festlegen. Sie können dies tun, indem Sie die Einstellungz-index Wert in den Einstellungen für das Web Widget (Classic). In diesem Beitrag werden einige grundlegende Fälle vonz-index, um die Anordnung des Widgets mit anderen Elementen auf Ihrer Website zu ändern.

Hinweis: Bei den folgenden Beispielen handelt es sich um angepassten Code, der nicht direkt unterstützt wird und für dessen Implementierung ein Webentwickler erforderlich ist. Wenn Sie sich diesen Beitrag und Beispiele aus unserem eigenen Web Widget ansehen, werden einige Beispiele möglicherweise nicht richtig angezeigt. Um die Beispiele anzuzeigen, klicken Sie auf das Pfeilsymbol ( ) oben rechts im Web Widget, um diesen Beitrag in einer neuen Registerkarte im Browser zu öffnen.

Was istz-index ?
Erklärung und Definition von z-index

Z-index ist eine CSS-Eigenschaft, die zum Festlegen der Sichtbarkeit und Positionierung überlappender Inhalte verwendet wird. Wenn sich zwei Elemente überlappen, ist diez-index bestimmt, welches Element übereinander erscheint. Diez-index value kann eine Ganzzahl oder globale Werte wie inherit, initial und unset zugewiesen werden.

Bei Verwendung von Ganzzahlen ist derz-index dem höchsten Index zugewiesen ist, wird vor anderen Elementen angezeigt. Beispiel: Wenn Container A zugewiesen ist az-index von 2 und Container B wird a . zugewiesenz-index von 1 wird Container A vor Container B positioniert. Bei Verwendung globaler Werte nimmt das Element die zugewiesene Position im Verhältnis zum Wert des übergeordneten Elements ein.

Wie funktioniertz-index sich auf das Web Widget (Classic) beziehen?
Einstellungz-index für Ihr eigenes Widget

Es kann vorkommen, dass Sie Ihre Inhalte vor dem Web Widget (Classic) anzeigen möchten oder das Web Widget (Classic) ganz hinter anderen Inhalten verbergen möchten. Hier stellen Sie diez-index des Web Widgets (Classic) ist praktisch.

Wie stelle ich das . einz-index für mein Web Widget (Classic)?
Zwei Einstellungsmöglichkeiten z-index

Sie können diez-index für Ihr Web-Widget auf zwei Arten:

1. Verwenden Sie diewindow.zESettings Objekt. Dadurch wird diez-index wenn das Widget zum ersten Mal geladen wird. Weitere Informationen zur Verwendung deswindow.zESettings -Objekt finden Sie in unserer Entwicklerdokumentation hier.
2. Verwenden Sie die updateSettings-API. Dadurch können diez-index zur Laufzeit aktualisiert werden. Weitere Informationen zur Verwendung der updateSettings-API finden Sie in unserer Entwicklerdokumentation hier.

Hinweis: Das Web Widget (Classic)z-index Standardeinstellung ist der Index 999998, d. h. das Widget erscheint im Vordergrund des Bildschirms, es sei denn, ein anderes Objektz-index diese Zahl überschreitet.

Beispiel für die Verwendung des window.zESettings-Objekts
Diewindow.zESettings -Objekt können Sie diez-index beim Laden der Seite

In diesem Beispiel legen wir den Wertz-index mit demwindow.zESettings Objekt. Zur Erinnerung: Daswindow.zESettings -Objekt wird nur geladen, wenn das Widget gestartet wird. So aktualisieren Sie diez-index -Wert zur Laufzeit mit der updateSettings-API verwenden. Weitere Informationen finden Sie in den Beispielen weiter unten.

So sieht die Seite aus, bevor Änderungen amz-index Wert des Web Widgets (Classic). Wie erwartet erscheint das Web Widget (Classic) über unseren anderen Inhalten:

In diesem Beispiel oben ist dasz-index unseres Containerelements wurde nicht explizit festgelegt. Das bedeutet, dassz-index des Container-Elements ist der Standardwert auto, was 0 entspricht. Um das Web Widget (Classic) auszublenden, stellen Siez-index Wert kleiner als 0, wie hier gezeigt:

Wenn die Seite geladen wird, erscheint das Web Widget (Classic) hinter dem Containerelement. Dies liegt daran, dass diez-index Wert des Container-Elements ist höher als derz-index Wert des Web Widgets (Classic).

Das neuez-index -Wert bewirkt, dass das Web Widget (Classic) hinter den anderen Elementen der Webseite erscheint.

Beispiele für die Verwendung der updateSettings-API
Die updateSettings-API bietet Flexibilität, um Änderungen in Echtzeit vorzunehmen

In diesen Beispielen sehen Sie, dass das Modal az-index von 2. Wir ändern nur diez-index des Widgets, um es auszublenden oder in den Vordergrund zu bringen.

Beispiel 1: Verstecken des Web Widgets (Classic) hinter dem Modal

Um in unserem ersten Beispiel das Web Widget (Classic) hinter dem Modal zu verbergen, setzen wir diez-index auf 1 wie unten gezeigt.

Sehen Sie es in Aktion:

Beispiel 2: Bringen Sie das Web Widget (Classic) in den Vordergrund des Modal

In diesem Beispiel möchten wir, dass das Web Widget (Classic) vor dem Modal angezeigt wird, damit es auf der Seite weiterhin zugänglich ist. Wir werden wieder zE webWidget verwenden, um die Einstellungen zu aktualisieren und diez-index zu 3. Dadurch wird die Position des Web Widgets (Classic) verschoben.

Sehen Sie es in Aktion:

Zusammenfassung und zusätzliche Ressourcen
Weitere Informationen finden Sie unter diesen Links

Als Webentwickler können Sie die beste Methode zum Festlegen derz-index Wert Ihres Web Widgets (Classic). Diewindow.zESettings -Objekt gibt Ihnen die Möglichkeit, diez-index beim Laden der Seite, während die updateSettings-API Ihnen die Flexibilität bietet, Änderungen in Echtzeit vorzunehmen. Weitere Informationen zum Anpassen des Widgets finden Sie unter:
Erweiterte Anpassung des Web Widgets (Classic)
Unsere Entwickler-Community

Den Fortschritt zurücksetzen

Hinweis zur Übersetzung: Dieser Beitrag wurde mit automatischer Übersetzungssoftware übersetzt, um dem Leser ein grundlegendes Verständnis des Inhalts zu vermitteln. Trotz angemessener Bemühungen, eine akkurate Übersetzung bereitzustellen, kann Zendesk keine Garantie für die Genauigkeit übernehmen.

Sollten in Bezug auf die Genauigkeit der Informationen im übersetzten Beitrag Fragen auftreten, beziehen Sie sich bitte auf die englische Version des Beitrags, die als offizielle Version gilt.