Uso de z-index en el Web Widget (clásico)

Información general

El Web Widget (clásico) de Zendesk viene con muchas opciones de configuración y personalización. A veces tendrá que especificar el orden de pila del Web Widget (clásico) en relación con el resto del contenido de la página web. Para ello, puede configurar el z-index en la configuración del Web Widget (clásico) .

En este artículo se destacan algunos casos básicos de z-indexpara cambiar la disposición del widget con respecto a otros elementos del sitio web.

Descargo de responsabilidad: Este artículo se ofrece con fines de instrucción únicamente. Zendesk no ofrece soporte para el código ni lo garantiza. Publique cualquier problema que tenga en la sección de comentarios o intente buscar una solución en Internet.

Qué es z-index?

Z-index es una propiedad de CSS que se usa para establecer la visibilidad y el posicionamiento del contenido superpuesto. Cuando dos elementos se superponen, el z-index determina qué elemento aparece encima del otro. El z-index El valor se puede asignar con un número entero o valores globales como heredar, inicial y unset.

Cuando se usan enteros, el z-index asignado al índice más alto aparecerá delante de otros elementos. Por ejemplo, si al contenedor A se le asigna un z-index de 2 y al contenedor B se le asigna un z-index de 1, el contenedor A se coloca delante del contenedor B. Si se usan valores globales, el elemento tomará la posición asignada en relación con el valor de su elemento principal.

¿Cómo z-index se relacionan con el Web Widget (clásico)?

Puede z-index del Web Widget (clásico) para mostrar el contenido delante del Web Widget (clásico) o para ocultar el Web Widget (clásico) detrás de otro contenido por completo.

¿Cómo configuro el z-index para mi Web Widget (clásico)?

Puede establecer el z-index para el widget de dos maneras:

1. Utilice el window.zESettings objeto. Esto establecerá el z-index cuando el widget se carga por primera vez. Si desea más información sobre cómo usar el window.zESettings objeto, consulte la documentación para desarrolladores: Referencia de configuración.
2. Utilice el updateSettings API. Esto permitirá que el z-index para ser actualizado en tiempo de ejecución. Si desea más información sobre cómo usar el updateSettings API, consulte la documentación para desarrolladores: Core API.

Nota: El Web Widget (clásico) z-index la configuración predeterminada es un índice de 999998, lo que significa que el widget aparecerá en la parte frontal de la pantalla a menos que otro objeto z-index excede ese número.

Ejemplo de uso del objeto window.zESettings

El window.zESettings le permite establecer el z-index en la carga de la página.

En este ejemplo se establece el z-index usando el window.zESettings objeto. Como recordatorio, el window.zESettings se carga solo cuando se inicia el widget. Para actualizar el z-index valor en tiempo de ejecución usando el updateSettings API, consulte los ejemplos más abajo.

Así es como se verá la página antes de cualquier cambio en el z-index valor del Web Widget (clásico). Como era de esperar, el Web Widget (clásico) aparece encima del otro contenido:

En el ejemplo anterior, el z-index del elemento contenedor no se ha establecido explícitamente. Eso significa que z-index del elemento contenedor se establecerá de manera predeterminada en auto, que corresponde a 0. Para ocultar el Web Widget (clásico), configure el z-index menor que 0 como se muestra aquí:

Ahora, cuando se carga la página, aparece el Web Widget (clásico) detrás del elemento contenedor. Esto se debe a que z-index el valor del elemento contenedor es mayor que el z-index valor del Web Widget (clásico).

El nuevo z-index hace que el Web Widget (clásico) aparezca detrás de los otros elementos de la página web.

Ejemplos que usan el updateSettings API

El updateSettings La API le da flexibilidad para hacer cambios en tiempo real

Estos ejemplos muestran que el modal recibió una z-index de 2. Solo cambie el z-index del widget para ocultarlo o traerlo al frente de la pantalla.

Ejemplo 1: Ocultar el Web Widget (clásico) detrás del modal

En el primer ejemplo, para ocultar el Web Widget (clásico) detrás del modal, establezca el z-index a 1 como se muestra a continuación.

Véalo en acción:

Ejemplo 2: Llevar el Web Widget (clásico) al frente del modal

En este ejemplo se muestra cómo hacer que el Web Widget (clásico) se muestre delante del modal para que siga estando accesible en la página. En este ejemplo se usa una vez más zE webWidget para updateSettings y establezca el z-index a 3. Esto moverá la posición del Web Widget (clásico).

Véalo en acción:

Resumen y recursos adicionales

Como desarrollador web, puede elegir el mejor método para establecer z-index de su Web Widget (clásico). El window.zESettings le da la capacidad de establecer el z-index en la carga de la página, mientras que updateSettings La API le da la flexibilidad de hacer cambios en tiempo real. Si desea más información sobre cómo personalizar el widget, consulte este artículo: Personalización avanzada del Web Widget (clásico).

Descargo de responsabilidad de la traducción: Este artículo ha sido traducido usando software de traducción automática para proporcionar una idea básica del contenido. Se han realizado esfuerzos razonables para proporcionar una traducción exacta, sin embargo, Zendesk no garantiza la exactitud de la traducción.

Si surge alguna pregunta relacionada con la exactitud de la información incluida en el artículo traducido, consulte la versión en inglés del artículo, que es la versión oficial.