Aperçu
Zendesk Web Widget (Classique) est fourni avec de nombreux paramètres et options de personnalisation. Vous devrez parfois spécifier l'ordre d'empilage du Web Widget (Classique) par rapport au reste du contenu de votre page Web. Pour ce faire, il vous suffit de configurer la z-index
dans les paramètres du Web Widget (Classique).
Cet article souligne quelques cas élémentaires z-index
modifier la disposition 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 utilisée pour définir la visibilité et le positionnement du contenu qui se chevauche. Quand deux éléments se superposent, les z-index
détermine quel élément s'affiche au-dessus de l'autre. Le jeu de données z-index
value peut être composé d'un nombre entier ou de valeurs globales, comme inherit, initial ou unset.
Si vous utilisez des nombres entiers, les z-index
affectés à l'index le plus élevé s'affichent devant les autres éléments. Par exemple, si le conteneur A se voit affecter un z-index
sur 2 et un marqueur B est affecté au conteneur z-index
sur 1, le conteneur A est placé devant le conteneur B. Quand vous utilisez des valeurs globales, l'élément occupera la position affectée par rapport à la valeur de son parent.
Comment z-index
avoir un rapport avec le Web Widget (Classique) ?
Vous pouvez z-index
du Web Widget (Classique) pour afficher votre contenu devant le Web Widget (Classique) ou pour masquer entièrement le Web Widget (Classique) derrière d'autres contenus.
Comment configurer la z-index
pour mon Web Widget (Classique) ?
Vous pouvez définir z-index
pour votre widget de deux façons :
- Utilisez
window.zESettings
. Cela définitz-index
au chargement initial du widget. Pour en savoir plus sur l'utilisation du jeu de donnéeswindow.zESettings
, consultez la documentation destinée aux développeurs : Paramètres - Référence - Utilisez
updateSettings
API. Cela permettra auz-index
être mis à jour au moment de l'exécution. Pour en savoir plus sur l'utilisation du jeu de donnéesupdateSettings
API, consultez la documentation destinée aux développeurs : API de base.
z-index
par défaut, son indice est 999998, ce qui signifie que le widget s'affichera au premier plan de l'écran, sauf si un autre objet z-index
dépasse cette valeur.Exemple utilisant l'objet window.zESettings
Le jeu de données window.zESettings
vous permet de définir z-index
au chargement de la page.
Cet exemple définit z-index
à l'aide de l'option window.zESettings
. Pour rappel, le window.zESettings
est chargé uniquement au démarrage du widget. Pour mettre à jour le z-index
à l'exécution, updateSettings
(consultez les exemples ci-dessous).
Voici à quoi ressemblera la page avant toute modification des z-index
du Web Widget (Classique). Comme prévu, le Web Widget (Classique) s'affiche au-dessus de nos autres contenus :
Dans l'exemple ci-dessus, le paramètre z-index
de l'élément conteneur n'a pas été définie explicitement. Cela signifie que z-index
de l'élément conteneur sera par défaut auto, ce qui correspond à 0. Pour masquer le Web Widget (Classique), définissez la z-index
inférieure à 0, comme illustré ici :
Lorsque la page est chargée, le Web Widget (Classique) apparaît derrière l'élément conteneur. En effet, le champ z-index
de l'élément conteneur est supérieure à z-index
du Web Widget (Classique).
Le nouveau z-index
entraîne l'affichage du Web Widget (Classique) derrière les autres éléments de la page Web.
Exemples utilisant l'attribut updateSettings
API
Le jeu de données updateSettings
L'API vous donne la souplesse d'apporter des modifications en temps réel
Ces exemples vous montrent que la fenêtre a reçu un marqueur z-index
sur 2. Ne modifiez que z-index
du widget pour le masquer ou le faire passer au premier plan de l'écran.
Exemple 1 : Masquer le Web Widget (Classique) derrière la fenêtre contextuelle
Dans le premier exemple, pour masquer le Web Widget (Classique) derrière la fenêtre, définissez z-index
sur 1, comme illustré ci-dessous.
Voyez-le en action :
Exemple 2 : Placer le Web Widget (Classique) au premier plan de la fenêtre
Cet exemple vous montre comment faire pour que le Web Widget (Classique) s'affiche devant la fenêtre contextuelle afin qu'il reste accessible sur la page. Cet exemple utilise à nouveau zE webWidget pour updateSettings
et définir le z-index
à 3. Cela déplacera la position du Web Widget (Classique).
Voyez-le en action :
Résumé et ressources supplémentaires
En tant que développeur Web, vous pouvez choisir la meilleure méthode pour définir z-index
de votre Web Widget (Classique). Le jeu de données window.zESettings
vous permet de définir z-index
au chargement de la page, updateSettings
L'API vous permet d'apporter 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.
0 commentaire