Uso di z-index nel Web Widget (versione classica)

Panoramica

Zendesk Web Widget (versione classica) include molte impostazioni e opzioni di personalizzazione. A volte è necessario specificare l’ordine di sovrapposizione del Web Widget (versione classica) in relazione agli altri contenuti della pagina web. Puoi farlo impostando z-index valore nelle impostazioni Web Widget (versione classica) .

Questo articolo evidenzia alcuni casi di base di z-indexper cambiare la disposizione del widget con gli altri elementi del sito web.

Avvertenza: Questo articolo viene fornito solo a scopo didattico. Zendesk non fornisce assistenza per il codice e non lo garantisce. Se riscontri eventuali problemi, lascia un commento o prova a cercare una soluzione online.

Che cos’è z-index?

Z-index è una proprietà CSS usata per impostare la visibilità e il posizionamento dei contenuti sovrapposti. Quando due elementi si sovrappongono, il z-index determina quale elemento appare sopra l’altro. Il z-index value può essere assegnato con un numero intero o valori globali come eredita, initial e unset.

Quando si usano numeri interi, l’elemento z-index assegnato all’indice più alto apparirà davanti agli altri elementi. Ad esempio, se al container A è assegnato a z-index di 2 e il contenitore B è assegnato a z-index di 1, il contenitore A è posizionato davanti al contenitore B. Quando si usano valori globali, l’elemento assumerà la posizione assegnata rispetto al valore principale.

Come funziona z-index correlati al Web Widget (versione classica)?

Puoi il z-index del Web Widget (versione classica) per visualizzare il contenuto davanti al Web Widget (versione classica) o per nascondere completamente il Web Widget (versione classica) dietro ad altri contenuti.

Come posso impostare il z-index per il mio Web Widget (versione classica)?

Puoi impostare il z-index per il widget in due modi:

1. Usa il window.zESettings oggetto. Questo imposterà il z-index quando il widget viene caricato per la prima volta. Per ulteriori informazioni sull’uso di window.zESettings oggetto, consulta la documentazione per sviluppatori: Informazioni di riferimento sulle impostazioni.
2. Usa il updateSettings API. Ciò consentirà al z-index da aggiornare in fase di esecuzione. Per ulteriori informazioni sull’uso di updateSettings API, consulta la documentazione per sviluppatori: Core API.

Nota: Il Web Widget (versione classica) z-index l’impostazione predefinita è un indice di 999998, il che significa che il widget apparirà nella parte anteriore dello schermo a meno che non sia un altro oggetto z-index supera tale numero.

Esempio di utilizzo dell’oggetto window.zESettings

Il window.zESettings consente di impostare l’ z-index al caricamento della pagina.

Questo esempio imposta il z-index usando il window.zESettings oggetto. Come promemoria, il window.zESettings viene caricato solo all’avvio del widget. Per aggiornare il z-index valore in fase di esecuzione usando updateSettings API, consulta gli esempi più avanti.

Ecco come apparirà la pagina prima di qualsiasi modifica al file z-index valore del Web Widget (versione classica). Come previsto, il Web Widget (versione classica) viene visualizzato in cima agli altri nostri contenuti:

Nell’esempio qui sopra, il z-index dell’elemento contenitore non è stato impostato in modo esplicito. Ciò significa che il z-index dell’elemento contenitore sarà impostato automaticamente su auto, che corrisponde a 0. Per nascondere il Web Widget (versione classica), imposta il z-index valore inferiore a 0, come mostrato qui:

Ora, quando la pagina viene caricata, il Web Widget (versione classica) viene visualizzato dietro l’elemento contenitore. Questo perché il z-index il valore dell’elemento contenitore è maggiore di z-index valore del Web Widget (versione classica).

Il nuovo z-index fa apparire il Web Widget (versione classica) dietro gli altri elementi della pagina web.

Esempi che usano updateSettings API

Il updateSettings L’API offre la flessibilità di apportare modifiche in tempo reale

Questi esempi mostrano che al modale è stato assegnato a z-index di 2. Cambia solo il z-index del widget per nasconderlo o portarlo in primo piano sullo schermo.

Esempio 1: Nascondere il Web Widget (versione classica) dietro la modale

Nel primo esempio, per nascondere il Web Widget (versione classica) dietro la finestra modale, imposta il widget z-index a 1 come mostrato di seguito.

Guardalo in azione:

Esempio 2: Porta il Web Widget (versione classica) in primo piano

Questo esempio mostra come visualizzare il Web Widget (versione classica) davanti alla modale in modo che sia ancora accessibile nella pagina. Questo esempio usa ancora una volta zE webWidget to updateSettings e impostare il z-index a 3. Questo sposterà effettivamente la posizione del Web Widget (versione classica).

Guardalo in azione:

Riepilogo e risorse aggiuntive

In qualità di sviluppatore web, puoi scegliere il metodo migliore per impostare il z-index valore del Web Widget (versione classica). Il window.zESettings ti dà la possibilità di impostare z-index al caricamento della pagina, mentre il updateSettings L’API offre la flessibilità di apportare modifiche in tempo reale. Per ulteriori informazioni sulla personalizzazione del widget, consulta questo articolo: Personalizzazione avanzata del Web Widget (versione classica).

Avvertenza sulla traduzione: questo articolo è stato tradotto usando un software di traduzione automatizzata per fornire una comprensione di base del contenuto. È stato fatto tutto il possibile per fornire una traduzione accurata, tuttavia Zendesk non garantisce l'accuratezza della traduzione.

Per qualsiasi dubbio sull'accuratezza delle informazioni contenute nell'articolo tradotto, fai riferimento alla versione inglese dell'articolo come versione ufficiale.