Übersicht
Im Zendesk Web Widget (Classic) gibt es zahlreiche Einstellungs- und Anpassungsoptionen. Manchmal müssen Sie die Stack-Reihenfolge des Web Widgets (Classic) im Verhältnis zu den anderen Inhalten auf Ihrer Webseite angeben. Hierzu können Sie die Einstellung z-index
in den Einstellungen für das Web Widget (Classic) auswählen.
In diesem Beitrag werden einige grundlegende Fälle von z-index
um zu ändern, wie Ihr Widget zusammen mit anderen Elementen auf Ihrer Website angeordnet wird.
Was ist z-index
?
Z-index
ist eine CSS-Eigenschaft zum Festlegen der Sichtbarkeit und Position von sich überschneidenden Inhalten. Wenn sich zwei Elemente überschneiden, wird der z-index
bestimmt, welches Element über dem anderen angezeigt wird. The z-index
value kann ein Integer oder globale Werte wie eren, initial und unset zugewiesen werden.
Bei Verwendung von Integern wird der z-index
dem höchsten Index zugewiesen ist, wird vor anderen Elementen angezeigt. Wenn beispielsweise Container A zugewiesen ist a z-index
von 2 und Container B wird zugewiesen a z-index
Mit dem Wert 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 funktioniert z-index
sich auf das Web Widget (Classic) beziehen?
Sie können die z-index
des Web Widgets (Classic) festlegen, um Ihre Inhalte vor dem Web Widget (Classic) anzuzeigen oder das Web Widget (Classic) ganz hinter anderen Inhalten zu verbergen.
Wie stelle ich den z-index
für mein Web Widget (Classic)?
Sie können die z-index
für Ihr Widget nutzen:
- Verwenden Sie die
window.zESettings
Objekt. Dadurch wird derz-index
wenn das Widget zum ersten Mal geladen wird. Weitere Informationen zur Verwendung derwindow.zESettings
finden Sie in der Dokumentation für Entwickler: Einstellungsreferenz. - Verwenden Sie die
updateSettings
API. Dadurch können diez-index
zur Laufzeit aktualisiert werden. Weitere Informationen zur Verwendung derupdateSettings
API finden Sie in der Dokumentation für Entwickler: Core-API.
z-index
standardmäßig der Index 999998. Das Widget erscheint also am Anfang des Bildschirms, es sei denn, es wird ein anderes Objekt z-index
diesen Wert überschreitet.Beispiel mit dem window.zESettings-Objekt
The window.zESettings
-Objekt können Sie die z-index
beim Laden der Seite.
In diesem Beispiel wird der z-index
mit dem window.zESettings
Objekt. Zur Erinnerung: Die window.zESettings
-Objekt wird nur beim Starten des Widgets geladen. So aktualisieren Sie die z-index
zur Laufzeit mit dem updateSettings
API finden Sie in den Beispielen weiter unten.
So sieht die Seite aus, bevor Änderungen an der z-index
Wert des Web Widgets (Classic). Wie erwartet erscheint das Web Widget (Classic) über den anderen Inhalten:
Im obigen Beispiel ist der z-index
des Containerelements nicht explizit festgelegt wurde. Das bedeutet, dass die z-index
des Containerelements ist der Standardwert „Auto“, was 0 entspricht. Um das Web Widget (Classic) auszublenden, stellen Sie die z-index
Wert kleiner als 0, wie hier gezeigt:
Wenn die Seite geladen wird, wird das Web Widget (Classic) hinter dem Containerelement angezeigt. Dies liegt daran, dass die z-index
Wert des Container-Elements ist höher als der Wert des z-index
Wert des Web Widgets (Classic).
Das neue z-index
lässt das Web Widget (Classic) hinter den anderen Elementen der Webseite erscheinen.
Beispiele für updateSettings
API
The updateSettings
API gibt Ihnen die Flexibilität, Änderungen in Echtzeit vorzunehmen
Diese Beispiele zeigen, dass das Modalfenster a z-index
von 2. Nur das z-index
des Widgets, um es entweder zu verbergen oder in den Vordergrund zu bringen.
Beispiel 1: Verbergen des Web Widgets (Classic) hinter dem Modalfenster
Um im ersten Beispiel das Web Widget (Classic) hinter dem Modalfenster zu verstecken, legen Sie den Wert des Widgets z-index
auf 1 setzen, wie unten dargestellt.
In Aktion sehen:
Beispiel 2: Bringen Sie das Web Widget (Classic) in den Vordergrund des Modalfensters
In diesem Beispiel wird gezeigt, wie Sie das Web Widget (Classic) vor dem Modalfenster anzeigen lassen, damit es auf der Seite zugänglich ist. Auch in diesem Beispiel wird zE webWidget verwendet, um updateSettings
und legen Sie die z-index
zu 3. Dadurch wird die Position des Web Widgets (Classic) verschoben.
In Aktion sehen:
Zusammenfassung und zusätzliche Ressourcen
Als Webentwickler können Sie die beste Methode zum Festlegen der z-index
Wert Ihres Web Widgets (Classic). The window.zESettings
-Objekt können Sie das z-index
beim Laden der Seite, während der updateSettings
Die API gibt 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.
0 Kommentare