Übersicht

Das Zendesk Web Widget (Classic) weist zahlreiche Einstellungs- und Anpassungsoptionen auf. Manchmal müssen Sie die Stapelreihenfolge des Web Widget (Classic) im Verhältnis zu den anderen Inhalten auf Ihrer Webseite festlegen. Legen Sie hierzu die fest z-index in den Einstellungen für das Web Widget (Classic) festgelegt haben.

Dieser Beitrag beschreibt die grundlegenden Fälle von z-indexum das Widget an die anderen Elemente Ihrer Website anzupassen.

Haftungsausschluss: Dieser Beitrag dient lediglich zu Demonstrationszwecken. Zendesk bietet keine Unterstützung oder Garantie für den Code. Bitte posten Sie eventuelle Probleme in den Kommentaren oder suchen Sie online nach einer Lösung.

Was ist z-index(Englisch)? (Englisch)

Z-index ist eine CSS-Eigenschaft, mit der die Sichtbarkeit und Position von überlappenden Inhalten festgelegt werden. Wenn sich zwei Elemente überschneiden, wird die z-index bestimmt, welches Element oben auf dem anderen erscheint. Die z-index value kann eine Ganzzahl oder globale Werte wie inherit, initial und unset enthalten.

Bei Verwendung von Ganzzahlen das Element z-index , die dem höchsten Index zugewiesen sind, vor den anderen Elementen. Beispiel: Wenn Container A zugewiesen ist, z-index 2 und Container B ist zugewiesen z-index von 1, befindet sich Container A vor Container B. Bei Verwendung globaler Werte nimmt das Element die zugewiesene Position in Bezug auf den Wert seines übergeordneten Elements ein.

Wie geht das? z-index beziehen sich auf das Web Widget (Classic)?

Sie können die z-index des Web Widget (Classic) Ihre Inhalte vor dem Web Widget (Classic) anzeigen oder das Web Widget (Classic) vollständig hinter anderen Inhalten ausblenden.

Wie lege ich die fest? z-index für mein Web Widget (Classic)?

Sie können die festlegen z-index des Web Widgets:

  1. Verwenden Sie die window.zESettings Objekt. Dadurch wird die festgelegt z-index wenn das Widget zum ersten Mal geladen wird. Weitere Informationen zur Verwendung der window.zESettings finden Sie in der Dokumentation für Entwickler: Einstellungsreferenz.
  2. Verwenden Sie die updateSettings API. Auf diese Weise können Sie die z-index die zur Laufzeit aktualisiert werden. Weitere Informationen zur Verwendung der updateSettings API finden Sie in der Dokumentation für Entwickler: Core API.
Hinweis: Das Web Widget (Classic) z-index ist standardmäßig der Index 999998, d. h., das Widget erscheint ganz vorne auf dem Bildschirm, es sei denn, es ist ein anderes Objekt vorhanden z-index überschreitet diese Zahl.

Beispiel mit dem Objekt „window.zESettings“.

Die window.zESettings -Objekt können Sie die z-index beim Laden der Seite.

In diesem Beispiel wird die festgelegt z-index mit der window.zESettings Objekt. Zur Erinnerung: window.zESettings wird nur beim Starten des Widgets geladen. Um die zu aktualisieren, z-index Wert zur Laufzeit mit der updateSettings API finden Sie in den Beispielen weiter unten.

So sieht die Seite aus, bevor Änderungen vorgenommen wurden z-index des Web Widget (Classic) anpassen. Wie erwartet erscheint das Web Widget (Classic) über den anderen Inhalten:
mceclip0.png

Im obigen Beispiel wurde z-index des Container-Elements nicht explizit festgelegt. Das heißt, dass Sie die z-index des Container-Elements wird standardmäßig auf automatisch gesetzt, was 0 entspricht. Um das Web Widget (Classic) auszublenden, legen Sie die fest z-index Wert niedriger als 0, wie hier gezeigt:

mceclip1.png

Wenn die Seite geladen wird, erscheint das Web Widget (Classic) hinter dem Container-Element. Dies liegt daran, dass die z-index -Wert des Container-Elements ist höher als der z-index des Web Widget (Classic) anpassen.

mceclip2.png

Die Neue z-index bewirkt, dass das Web Widget (Classic) hinter den anderen Elementen auf der Webseite angezeigt wird.

Beispiele mit der updateSettings API

Die updateSettings Mit der API können Sie Änderungen in Echtzeit vornehmen

Diese Beispiele zeigen, dass das Modal durch eine vorgegeben wurde z-index von 2. Ändern Sie nur das z-index man das Widget entweder ausblenden oder nach vorne blenden kann.Example_Image_1.png

Beispiel 1: Ausblenden des Web Widget (Classic) hinter dem Modalfenster

Im ersten Beispiel legen Sie die Einstellungen des Widgets fest, um das Web Widget (Classic) hinter dem Modalfenster auszublenden z-index zu 1, wie unten zu sehen.

Example_Image_2.png

In Aktion sehen

Example_Image__GIF__3.gif

Beispiel 2: Bringen Sie das Web Widget (Classic) in den Anfang des Modalfensters

Dieses Beispiel zeigt, wie Sie das Web Widget (Classic) vor dem Modalfenster anzeigen können, damit es auf der Seite weiterhin erreichbar ist. In diesem Beispiel wird wieder zE webWidget verwendet updateSettings dann die gewünschten Einstellungen vornehmen z-index bis 3. Dadurch wird die Position des Web Widget (Classic) geändert.

Example_Image_4.png

In Aktion sehen

Example_Image__GIF__5.gif

Zusammenfassung und zusätzliche Ressourcen

Als Webentwickler können Sie die beste Methode wählen, um das festzulegen z-index Wert Ihres Web Widget (Classic). Die window.zESettings -Objekt gibt Ihnen die Möglichkeit, die z-index beim Laden der Seite, während die updateSettings API bietet Ihnen die Flexibilität, Änderungen in Echtzeit vorzunehmen. Weitere Informationen zum Anpassen des Widgets finden Sie in diesem Beitrag: Erweiterte Anpassung des Web Widgets (Classic)

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.

Powered by Zendesk