Visão geral
O Zendesk Web Widget (clássico) tem várias configurações e opções de personalização. Às vezes, você precisará especificar a ordem da pilha do Web Widget (Classic) em relação a outros conteúdos em sua página da web. Você pode fazer isso definindo o z-index
nas configurações do Web Widget (clássico).
Este artigo destaca alguns casos básicos de z-index
para alterar a organização do widget em relação aos outros elementos no website.
O que é z-index
?
Z-index
é uma propriedade do CSS usada para definir a visibilidade e o posicionamento do conteúdo sobreposto. Quando dois elementos se sobrepõem, a palavra-chave z-index
determina qual elemento aparece um sobre o outro. A palavra-chave z-index
pode ser atribuído com um número inteiro ou valores globais como herdado, inicial e não definido.
Ao usar números inteiros, a extensão z-index
atribuídos ao índice mais alto aparecerão na frente dos outros elementos. Por exemplo, se o contêiner A receber um z-index
de 2, e o contêiner B recebe um z-index
de 1, o contêiner A é posicionado na frente do contêiner B. Ao usar valores globais, o elemento assumirá a posição atribuída em relação ao valor de seu pai.
Como z-index
estão relacionados ao Web Widget (Classic)?
Você pode z-index
do Web Widget (clássico) para exibir seu conteúdo na frente do Web Widget (clássico) ou ocultar o Web Widget (clássico) atrás de outro conteúdo.
Como defino o z-index
para o meu Web Widget (Classic)?
Você pode definir a z-index
para o widget de duas maneiras:
- Use a palavra-chave
window.zESettings
objeto. Isso definirá az-index
quando o widget for carregado pela primeira vez. Para obter mais informações sobre o uso da palavra-chavewindow.zESettings
, consulte a documentação do desenvolvedor: Referência de configurações. - Use a palavra-chave
updateSettings
API. Isso permitirá quez-index
sejam atualizados em tempo de execução. Para obter mais informações sobre o uso da palavra-chaveupdateSettings
API, consulte a documentação do desenvolvedor: Core API.
z-index
por padrão, o índice é 999998, o que significa que o widget aparecerá na frente da tela, a menos que outro objeto z-index
excede esse número.Exemplo usando o objeto window.zESettings
A palavra-chave window.zESettings
permite que você defina o z-index
no carregamento da página.
Este exemplo define a z-index
usando a palavra-chave window.zESettings
objeto. Um lembrete: a window.zESettings
é carregado apenas quando o widget é inicializado. Como atualizar a z-index
em tempo de execução usando a condição updateSettings
API, consulte os exemplos mais abaixo.
A aparência da página será assim antes de qualquer alteração z-index
do Web Widget (Classic). Como esperado, o Web Widget (Classic) aparece em cima de nosso outro conteúdo:
No exemplo acima, a condição z-index
do elemento contêiner não foi definido explicitamente. Isso significa que z-index
do elemento contêiner usará como padrão auto, que corresponde a 0. Para ocultar o Web Widget (clássico), defina a z-index
menor que 0, como mostrado aqui:
Agora, quando a página é carregada, o Web Widget (clássico) aparece atrás do elemento contêiner. Isso ocorre porque a palavra-chave z-index
valor do elemento recipiente é maior do que o z-index
do Web Widget (Classic).
O novo z-index
faz com que o Web Widget (clássico) seja exibido atrás de outros elementos da página da web.
Exemplos usando a palavra-chave updateSettings
API
A palavra-chave updateSettings
A API oferece flexibilidade para fazer alterações em tempo real
Esses exemplos mostram que o modal recebeu uma z-index
de 2. Alterar apenas z-index
do widget para ocultá-lo ou trazê-lo para a frente da tela.
Exemplo 1: Ocultamento do Web Widget (clássico) atrás da caixa de diálogo
No primeiro exemplo, para ocultar o Web Widget (clássico) atrás da caixa de diálogo, defina a extensão z-index
para 1, conforme mostrado abaixo.
Veja-o em ação:
Exemplo 2: Colocar o Web Widget (clássico) para a frente da caixa de diálogo
Este exemplo mostra como exibir o Web Widget (Classic) na frente da caixa de diálogo para que ele ainda fique acessível na página. Este exemplo usa novamente o zE webWidget para updateSettings
e definir z-index
para 3. Isso moverá efetivamente a posição do Web Widget (Classic).
Veja-o em ação:
Resumo e recursos adicionais
Como desenvolvedor web, você pode escolher o melhor método para definir a z-index
valor de seu Web Widget (Classic). A palavra-chave window.zESettings
permite que você defina o z-index
no carregamento da página, enquanto a palavra-chave updateSettings
A API oferece flexibilidade para fazer alterações em tempo real. Para obter mais informações sobre a personalização de seu widget, consulte este artigo: Personalização avançada do Web Widget (clássico).
Aviso sobre a tradução: este artigo foi traduzido por um software de tradução automática para oferecer a você uma compreensão básica do conteúdo. Medidas razoáveis foram tomadas para fornecer uma tradução precisa, no entanto, a Zendesk não garante a precisão da tradução.
Em caso de dúvidas relacionadas à precisão das informações contidas no artigo traduzido, consulte a versão oficial do artigo em inglês.
0 comentários