Información general
Zendesk Web Widget (Classic) viene con muchas opciones de configuración y personalización. A veces es necesario especificar el orden de la pila del Web Widget (clásico) en relación con el resto del contenido de la página web. Para ello, configure la opción z-index
en la configuración del Web Widget (clásico).
Este artículo destaca algunos casos básicos de z-index
para cambiar la manera en que se organiza el widget con otros elementos del sitio web.
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
value se puede asignar con un número entero o valores globales como heredado, inicial y no establecido.
Cuando se usan números enteros, la z-index
asignados al índice más alto aparecerán delante de los otros elementos. Por ejemplo, si al contenedor A se le asigna un z-index
de 2 y al contenedor B se le asigna un valor z-index
de 1, el contenedor A se coloca delante del contenedor B. Cuando se usan valores globales, el elemento adoptará la posición asignada en relación con el valor de su principal.
¿Cómo funciona? z-index
con el Web Widget (clásico)?
Puede el z-index
del Web Widget (clásico) para mostrar el contenido delante del Web Widget (clásico), o bien para ocultar el Web Widget (clásico) detrás de otro contenido.
¿Cómo se configura el z-index
para mi Web Widget (clásico)?
Puede configurar el z-index
para el widget de dos maneras:
- Utilice el
window.zESettings
objeto. Esto establecerá elz-index
cuando el widget se carga por primera vez. Si desea más información sobre el uso de lawindow.zESettings
, consulte la documentación para desarrolladores: Referencia de configuración. - Utilice el
updateSettings
API. Esto permitirá quez-index
para ser actualizado en tiempo de ejecución. Si desea más información sobre el uso de laupdateSettings
API, consulte la documentación para desarrolladores: Core API.
z-index
la configuración predeterminada tiene un índice de 999998, lo que significa que el widget aparecerá en la parte delantera de la pantalla a menos que haya otro objeto z-index
excede ese número.Ejemplo con el uso del objeto window.zESettings
El window.zESettings
permite establecer el z-index
al cargar la página.
Este ejemplo establece el z-index
usando la palabra clave window.zESettings
objeto. Como recordatorio, el window.zESettings
se carga solo cuando se inicia el widget. Para actualizar la z-index
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 los cambios en la z-index
del Web Widget (clásico). Como era de esperar, el Web Widget (clásico) aparece además del resto del contenido:
En el ejemplo anterior, la z-index
del elemento contenedor no se ha establecido explícitamente. Eso quiere decir que z-index
El valor predeterminado del elemento contenedor será automático, que corresponde a 0. Para ocultar el Web Widget (clásico), establezca la z-index
valor inferior a 0, como se muestra aquí:
Ahora, cuando se cargue la página, el Web Widget (clásico) aparecerá detrás del elemento contenedor. Esto se debe a que z-index
El valor del elemento contenedor es superior al valor z-index
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 la palabra clave updateSettings
API
El updateSettings
La API le da flexibilidad para hacer cambios en tiempo real
Estos ejemplos muestran que al modal se le asignó un z-index
de 2. Solo cambie la z-index
del widget para ocultarlo o mostrarlo al principio 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 widget 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 z-index
a 3. Efectivamente, 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 la z-index
del Web Widget (clásico). El window.zESettings
permite establecer el z-index
al cargar 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.
0 comentarios