Panoramica
Zendesk Web Widget (versione classica) include numerose impostazioni e opzioni di personalizzazione. A volte è necessario specificare l’ordine in pila del Web Widget (versione classica) in relazione agli altri contenuti della pagina web. Puoi farlo impostando z-index
valore nelle impostazioni del Web Widget (versione classica).
Questo articolo evidenzia alcuni casi fondamentali di z-index
per cambiare la disposizione del widget con gli altri elementi del sito web.
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 file z-index
determina quale elemento appare sopra l’altro. Il z-index
value può essere assegnato con un numero intero o valori globali come inherit, initial e unset.
Quando si usano numeri interi, l’elemento z-index
assegnato all’indice più alto apparirà prima degli altri elementi. Ad esempio, se al container A è assegnato a z-index
di 2 e al 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 in relazione al valore del relativo elemento principale.
Come? z-index
sono correlati al Web Widget (versione classica)?
Puoi 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 z-index
per il widget in due modi:
- Usa il
window.zESettings
oggetto. Verrà impostato ilz-index
quando il widget viene caricato per la prima volta. Per maggiori informazioni sull’uso diwindow.zESettings
oggetto, consulta la documentazione per gli sviluppatori: Riferimento alle impostazioni. - Usa il
updateSettings
API. In questo modo il filez-index
da aggiornare in fase di esecuzione. Per maggiori informazioni sull’uso diupdateSettings
API, consulta la documentazione per sviluppatori: Core API.
z-index
l’impostazione predefinita è 999998, il che significa che il widget apparirà in primo piano sullo schermo, a meno che non sia z-index
supera quel numero.Esempio di utilizzo dell’oggetto window.zESettings
Il window.zESettings
consente di impostare l’oggetto z-index
al caricamento della pagina.
Questo esempio imposta l’estensione z-index
usando il window.zESettings
oggetto. Come promemoria, il window.zESettings
viene caricato solo all’avvio del widget. Per aggiornare il file z-index
valore in fase di esecuzione usando il file updateSettings
API, guarda gli esempi qui sotto.
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 file 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) appare dietro l’elemento contenitore. Ciò è dovuto al fatto che il file z-index
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 alla 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 finestra di dialogo
Nel primo esempio, per nascondere il Web Widget (versione classica) dietro la finestra di dialogo, devi impostare il widget z-index
a 1 come mostrato di seguito.
Guardalo in azione:
Esempio 2: Porta il Web Widget (versione classica) in primo piano nella finestra di dialogo
Questo esempio mostra come visualizzare il Web Widget (versione classica) davanti alla finestra di dialogo 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. Questa operazione sposterà di fatto 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 file z-index
valore del Web Widget (versione classica). Il window.zESettings
ti dà la possibilità di impostare l’ z-index
al caricamento della pagina, mentre il file 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.
0 commenti