Visão geral

O Zendesk Web Widget (clássico) vem com muitas configurações e opções de personalização. Às vezes, você precisará especificar a ordem de pilha do Web Widget (clássico) em relação aos outros conteúdos em sua página da web. Você pode fazer isso definindo a z-index nas configurações do Web Widget (clássico) .

Este artigo destaca alguns casos básicos de z-indexpara alterar como seu widget é organizado em relação a outros elementos em seu site.

Isenção de responsabilidade: Este artigo destina-se apenas a fins informativos. O Zendesk não oferece suporte nem garantia ao código. Publique problemas encontrados nos comentários ou tente buscar uma solução online.

O que é z-index?

Z-index é uma propriedade CSS usada para definir a visibilidade e o posicionamento do conteúdo sobreposto. Quando dois elementos se sobrepõem, o z-index determina qual elemento aparece em cima do outro. O z-index O valor pode ser atribuído com um número inteiro ou valores globais, como herança, inicial e não definido.

Ao usar números inteiros, o valor do elemento z-index atribuídos ao índice mais alto serão exibidos na frente dos outros elementos. Por exemplo, se o contêiner A receber uma 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 é que z-index relacionados ao Web Widget (clássico)?

Você pode z-index do Web Widget (clássico) para exibir seu conteúdo na frente do Web Widget (clássico) ou para ocultar totalmente o Web Widget (clássico) atrás de outro conteúdo.

Como configuro o z-index para meu Web Widget (clássico)?

Você pode definir o z-index para o seu widget de duas maneiras:

  1. Use o window.zESettings . Isso definirá o z-index quando o widget for carregado pela primeira vez. Para obter mais informações sobre o uso do window.zESettings , consulte a documentação do desenvolvedor: Referência de configurações.
  2. Use o updateSettings API. Isso permitirá que o z-index sejam atualizados em tempo de execução. Para obter mais informações sobre o uso do updateSettings API, consulte a documentação do desenvolvedor: Core API.
Observação: O Web Widget (clássico) z-index A configuração padrão é um índice de 999998, o que significa que o widget será exibido na frente da tela, a menos que outro objeto z-index excede esse número.

Exemplo de uso do objeto window.zESettings

O window.zESettings O objeto permite que você defina o z-index no carregamento da página.

Este exemplo define o z-index usando o window.zESettings . Como um lembrete, o window.zESettings O objeto é carregado apenas quando o widget é inicializado. Como atualizar o z-index valor em tempo de execução usando o updateSettings API, consulte os exemplos abaixo.

Esta é a aparência da página antes de qualquer alteração na z-index valor do Web Widget (clássico). Como esperado, o Web Widget (clássico) aparece sobre nossos outros conteúdos:
mceclip0.png

No exemplo acima, o z-index do elemento de contêiner não foi definido explicitamente. Isso significa que o z-index do elemento de contêiner será padronizado como auto, que corresponde a 0. Para ocultar o Web Widget (clássico), defina a z-index valor menor que 0, conforme mostrado aqui:

mceclip1.png

Agora, quando a página é carregada, o Web Widget (clássico) é exibidoatrás do elemento do recipiente. Isso ocorre porque o z-index valor do elemento de contêiner é maior que o z-index valor do Web Widget (clássico).

mceclip2.png

O novo z-index faz com que o Web Widget (clássico) seja exibido atrás dos outros elementos da página da web.

Exemplos usando a updateSettings API

O updateSettings A API oferece flexibilidade para fazer alterações em tempo real

Esses exemplos mostram que o modal recebeu um z-index de 2. Altere apenas o z-index do widget para ocultá-lo ou exibi-lo na frente da tela.Example_Image_1.png

Exemplo 1: Ocultação do Web Widget (clássico) por trás do modal

No primeiro exemplo, para ocultar o Web Widget (clássico) atrás do modal, defina a z-index para 1, conforme mostrado abaixo.

Example_Image_2.png

Veja em ação:

Example_Image__GIF__3.gif

Exemplo 2: Colocar o Web Widget (clássico) na frente do modal

Este exemplo mostra como exibir o Web Widget (clássico) na frente do modal para que ele ainda esteja acessível na página. Este exemplo usa novamente o zE webWidget para updateSettings e defina o z-index a 3. Isso moverá efetivamente a posição do Web Widget (clássico).

Example_Image_4.png

Veja em ação:

Example_Image__GIF__5.gif

Resumo e recursos adicionais

Como desenvolvedor da Web, você pode escolher o melhor método para definir a z-index valor do seu Web Widget (clássico). O window.zESettings O objeto permite que você defina o z-index no carregamento da página, enquanto o updateSettings A API oferece a você a flexibilidade de fazer alterações em tempo real. Para obter mais informações sobre a personalização do 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.

Powered by Zendesk