概览
Zendesk Web Widget(经典)带有许多设置和自定义选项。有时您需要指定 Web Widget(经典)相对于您网页上其它内容的堆叠顺序。您可以通过设置 z-index
Web Widget(经典)设置中的值。
这篇文章重点介绍了一些基本的 z-index
以更改您的小组件与您网站上其它元素的排列方式。
什么是 z-index
?
Z-index
是一个 CSS 属性,用于设置重叠内容的可见度和位置。当两个元素重叠时, z-index
确定哪个元素重叠显示。的 z-index
value 可以分配一个整数或全局值,例如inherit、initial和unset。
当使用整数时,元素的 z-index
分配给最高索引的元素将显示在其他元素的前面。例如,如果容器 A 被分配一个 z-index
共 2 个,容器 B 被分配一个 z-index
为 1 时,容器 A 位于容器 B 的前面。当使用全局值时,元素将采用相对于其父元素值的分配位置。
如何 z-index
与 Web Widget(经典)相关?
您可以 z-index
以在 Web Widget(经典)的前面显示您的内容,或将 Web Widget(经典)完全隐藏在其它内容的后面。
如何设置 z-index
用于 Web Widget(经典)?
您可以设置 z-index
为您的小组件提供两种方式:
- 使用
window.zESettings
对象。这将设置z-index
当小组件首次加载时。有关使用window.zESettings
对象,请参阅开发者文档:设置参考。 - 使用
updateSettings
API。这将使z-index
在运行时更新。有关使用updateSettings
API,请参阅开发者文档:核心 API。
z-index
设置默认索引为 999998,这意味着小组件将显示在屏幕的前面,除非另一个对象的 z-index
超过该数字。使用 window.zESettings 对象的示例
的 window.zESettings
对象允许您设置 z-index
页面加载时。
此示例设置 z-index
使用 window.zESettings
对象。请注意, window.zESettings
对象仅在小组件启动时加载。要更新 z-index
运行时的值,使用 updateSettings
API,请参阅下面的示例。
以下是对 z-index
Web Widget(经典)的值。正如预期的那样,Web Widget(经典)显示在我们其他内容的顶部:
在上面的例子中, z-index
尚未显式设置容器元素的 。这意味着 z-index
容器元素的默认值为 auto,对应于 0。要隐藏 Web Widget(经典),将 z-index
值小于 0,如下所示:
现在,当页面加载时,Web Widget(经典)将显示在容器元素的后面。这是因为 z-index
容器元素的值高于 z-index
Web Widget(经典)的值。
新 z-index
值使 Web Widget(经典)显示在网页其它元素的后面。
示例使用 updateSettings
API
的 updateSettings
API 使您可以灵活地实时进行更改
这些例子向您表明,模式对话框被赋予了 z-index
2。仅更改 z-index
隐藏小组件,或将其置于屏幕的最前面。
示例 1:将 Web Widget(经典)隐藏在模式对话框后面
在第一个示例中,要将 Web Widget(经典)隐藏在模式对话框后面,设置小组件的 z-index
为 1,如下所示。
查看实际操作:
示例 2:将 Web Widget(经典)置于模式对话框的最前面
此示例向您展示如何使 Web Widget(经典)显示在模式对话框的前面,使其仍可在页面上访问。此示例再次使用 zE webWidget updateSettings
并设置 z-index
到 3。这将有效地移动 Web Widget(经典)的位置。
查看实际操作:
摘要和其他资源
作为 Web 开发者,您可以选择最佳的方法来设置 z-index
Web Widget(经典)的值。的 window.zESettings
对象使您可以设置 z-index
页面加载时,而 updateSettings
API 使您可以灵活地进行实时更改。有关自定义小组件的更多信息,请参阅文章:Web Widget(经典)的高级自定义
翻译免责声明:本文章使用自动翻译软件翻译,以便您了解基本内容。 我们已采取合理措施提供准确翻译,但不保证翻译准确性
如对翻译准确性有任何疑问,请以文章的英语版本为准。
0 条评论