Aperçu
Le Web Widget (Classique) Zendesk propose de nombreux paramètres et options de personnalisation. Il peut arriver que vous deviez spécifier l’ordre de pile du Web Widget (Classique) par rapport au reste du contenu de votre page Web. Vous pouvez le faire en configurant le z-index
dans les paramètres du Web Widget (Classique) .
Cet article présente des cas élémentaires z-index
pour modifier la présentation de votre widget avec les autres éléments de votre site Web.
Qu'est-ce que z-index
?
Z-index
est une propriété CSS qui sert à définir la visibilité et le positionnement du contenu qui se superpose. En cas de chevauchement de deux éléments, le marqueur z-index
détermine l’élément qui s’affiche au-dessus des autres. La z-index
value peut être affectée avec un nombre entier ou des valeurs globales comme hérité, initial et unset.
Quand vous utilisez des entiers, z-index
affectés à l’index le plus élevé s’affichent avant les autres éléments. Par exemple, si le conteneur A est affecté z-index
de 2 et le conteneur B reçoit un z-index
de 1, le conteneur A est placé avant le conteneur B. Quand vous utilisez les valeurs globales, l'élément choisit la position affectée par rapport à sa valeur parente.
Application z-index
ont trait au Web Widget (Classique)?
Vous pouvez z-index
du Web Widget (Classique) pour afficher votre contenu avant le Web Widget (Classique) ou pour masquer entièrement le Web Widget (Classique) derrière le reste du contenu.
Comment configurer z-index
pour mon Web Widget (Classique)?
Vous pouvez définir la z-index
pour votre widget de deux façons :
- Utilisez une
window.zESettings
. Cela définiraz-index
au chargement initial du widget. Pour en savoir plus sur l’utilisation duwindow.zESettings
, consultez la documentation pour les développeurs : Paramètres - Référence. - Utilisez une
updateSettings
API. Cela permet auz-index
afin d’être mis à jour à l’exécution. Pour en savoir plus sur l’utilisation duupdateSettings
API, consultez la documentation pour les développeurs : Core API.
z-index
en configurant par défaut l’index 999998, ce qui signifie que le widget s’affichera en avant de l’écran, sauf si un autre objet z-index
dépasse ce chiffre.Exemple utilisant l’objet window.zESettings
La window.zESettings
vous permet de définir z-index
au chargement de la page.
Cet exemple définit la z-index
en utilisant le mot-clé window.zESettings
. Pour rappel, le marqueur window.zESettings
L'objet est chargé uniquement au démarrage du widget. Pour mettre à jour : z-index
à l’exécution en utilisant updateSettings
API, consultez les exemples ci-dessous.
Voici à quoi ressemblera la page avant toute modification de l’ z-index
du Web Widget (Classique). Comme nous nous y attendons, le Web Widget (Classique) s’affiche au-dessus de notre autre contenu :
Dans l’exemple ci-dessus, le marqueur z-index
de l’élément conteneur n’a pas été défini explicitement. Cela signifie z-index
de l’élément conteneur prend la valeur auto par défaut, ce qui correspond à 0. Pour masquer le Web Widget (Classique), définissez les paramètres z-index
inférieure à 0, comme illustré ici :
Maintenant, une fois la page chargée, le Web Widget (Classique) s’affiche derrière l’élément conteneur. En effet, la z-index
La valeur de l’élément conteneur est supérieure à z-index
du Web Widget (Classique).
La nouvelle z-index
value fait apparaître le Web Widget (Classique) derrière les autres éléments de la page web.
Exemples utilisant le mot-clé updateSettings
API
La updateSettings
L’API vous permet d’effectuer des modifications en temps réel
Ces exemples vous montrent que la fenêtre contextuelle a reçu une z-index
sur 2. Modifier uniquement la z-index
du widget pour le masquer ou l’afficher à l’écran.
Exemple 1 : Masquage du Web Widget (Classique) derrière la fenêtre
Dans le premier exemple, pour masquer le Web Widget (Classique) derrière la fenêtre, définissez les paramètres z-index
à 1 comme illustré ci-dessous.
Découverte concrète :
Exemple 2 : Placer le Web Widget (Classique) au début de la fenêtre contextuelle
Cet exemple vous montre comment afficher le Web Widget (Classique) devant la fenêtre contextuelle pour qu’il reste accessible sur la page. Cet exemple utilise encore une fois zE webWidget pour updateSettings
et définissez z-index
à 3. Cela déplacera la position du Web Widget (Classique).
Découverte concrète :
Résumé et ressources supplémentaires
En tant que développeur Web, vous pouvez choisir la meilleure méthode de configuration z-index
de votre Web Widget (Classique). La window.zESettings
vous permet de définir z-index
au chargement de la page, alors que updateSettings
L’API vous permet d’effectuer des modifications en temps réel. Pour en savoir plus sur la personnalisation de votre widget, consultez cet article : Personnalisation avancée du Web Widget (Classique).
Traduction - exonération : cet article a été traduit par un logiciel de traduction automatisée pour permettre une compréhension élémentaire de son contenu. Des efforts raisonnables ont été faits pour fournir une traduction correcte, mais Zendesk ne garantit pas l’exactitude de la traduction.
Si vous avez des questions quant à l’exactitude des informations contenues dans l’article traduit, consultez la version anglaise de l’article, qui représente la version officielle.