Web 弹出窗口设置

使用 Popup settings（弹出窗口设置）面板来设置弹出窗口的外观和显示位置。网页内容和网页表单中都提供该面板。

该面板包含两个部分：

General settings（常规设置）：整个弹出窗口的外观和位置。
Current page（当前页面）：您正在编辑的页面的媒体和尺寸。

页面选项卡和 + Add page（+ 添加页面）位于面板顶部。请参阅多个页面。

图像和视频

使用这些设置来选择弹出窗口的图像和视频，并调整其适应方式和柔化效果。

如果布局包含一个或多个媒体块，请打开 Current page（当前页面）。每个媒体块都有预览和控件。

点击 Change image（更改图像）从您项目的媒体库中选择文件，或直接粘贴或编辑 Image URL（图像 URL）。
使用 Fit（适应）（Natural（自然）、Cover（覆盖）或 Contain（包含））设置图像如何填充其框架。背景图像不显示 Fit（适应）选项，因为它总是覆盖其区域。
（可选）使用 Blur（模糊）（0 到 20 像素）来柔化图像。
仅对于背景媒体，使用 Dim（变暗）（0 到 100%）添加深色遮罩，以确保图像顶部的文本保持可读性。

深色主题图像

启用深色主题的弹出窗口可以在深色模式下显示不同的图像，例如带有深色墨水的徽标。

启用深色主题后，每个图像块都会添加一个 Dark theme image（深色主题图像）行。

点击 Change image（更改图像）或设置 Image URL (dark theme)（图像 URL（深色主题））为深色模式选择不同的图像（例如，带有深色墨水的徽标）。
将其留空以在两种配色方案中都继续显示浅色的 Image URL（图像 URL）。

深色主题图像会应用于该块图像绘制的所有地方，包括背景图像或视频海报。

视频

在媒体块中使用视频代替图像。

将 Media（媒体）设置为 Video（视频）。
输入 Video URL（视频 URL）：视频文件的直接链接。视频仅接受外部 URL。您不能将视频上传到媒体库。请将其导出为 MP4（H.264 视频，AAC 音频），并启用“快速启动”（有时称为“Web 优化”），以便浏览器在整个文件下载完成前开始播放。如果 URL 加载失败，访问者将只能看到海报。
Loop（循环）默认开启，视频会连续重播。关闭它以在播放一次后停止。
打开 Show controls（显示控件）以显示浏览器内置的播放、暂停和音量控件。视频总是静音开始。没有此选项，访问者无法打开声音。
（可选）设置 Poster URL（海报 URL）：视频加载时显示的图像。推荐设置。在不支持视频的旧版弹出窗口脚本上，海报是唯一显示的内容。如果留空，访问者在视频位置将看不到任何内容。

媒体布局

某些布局会添加一个 Template variables（模板变量）部分，其中包含媒体块的放置设置。该部分仅在当前布局具有此类设置时才会出现。

当布局中媒体位于文本旁边时，请设置：

Image width（图像宽度）：占弹出窗口宽度的百分比。
Image position（图像位置）：Left（左）或 Right（右）。

在底部栏布局中，该部分提供的是 Buttons width（按钮宽度）而不是图像控件。

弹出窗口尺寸和样式

设置弹出窗口的尺寸、圆角、阴影以及出现方式。

在 Current page（当前页面）→ SIZE（尺寸）下，将 Width（宽度）和 Height（高度）留空，让弹出窗口根据其内容自动调整大小，或以像素为单位设置固定尺寸。在具有多个页面的弹出窗口中，每个页面都有自己的尺寸。
当页面应填满可用高度时，打开 Full height（全高）。
在 General settings（常规设置）中，设置弹出窗口的 Corner radius（圆角半径）和 Shadow（阴影）。
选择 Animation（动画）：弹出窗口出现的方式（Default（默认）、None（无）、Fade（淡入）或 Slide（滑动））。

启用深色主题后，Shadow（阴影）会跟随太阳/月亮配色方案切换。为浅色页面调整的阴影在深色页面上通常是不可见的，因此两者通常需要不同的值。

要独立于浅色阴影编辑深色调色板的阴影：

将太阳/月亮开关设置为 Dark（深色）。
编辑 Shadow（阴影）。

如果保持深色阴影不变，则两种配色方案都会使用浅色的 Shadow（阴影）值。

颜色

设置弹出窗口的颜色：背景、按钮的强调色和文本。

点击 Colors（颜色）展开弹出窗口的调色板。
设置 Background（背景）和 Accent (buttons)（强调色（按钮））用于弹出窗口背景和应用于按钮的强调色。
设置 Text（文本）和 Secondary text（次要文本）用于正文文本和次要文本，如标题和眉题。
如果布局在背景图像上有文本，请为该文本设置 Text over image（图像上文本）。网页表单没有此颜色。

深色模式

深色模式为设备设置为深色配色方案的访问者提供弹出窗口的第二个调色板。

在 Colors（颜色）中，打开 Enable dark theme（启用深色主题）。关闭此选项后，弹出窗口将始终为每位访问者使用上面的浅色调色板进行渲染。
使用颜色字段上方的太阳/月亮开关选择您正在编辑的调色板。画布会以该配色方案重新绘制。
点击 Auto from light（从浅色自动生成）以从当前浅色（重新）生成深色调色板。背景和表面变暗，文本变亮。Accent（强调色）和 Text over image（图像上文本）保持不变。之后可以编辑这五个字段中的任何一个进行微调。

再次关闭 Enable dark theme（启用深色主题）会保留深色调色板。再次打开它会恢复您的编辑，而不是从头开始重新生成。

当您在启用了深色主题的弹出窗口上打开 Preview（预览）时，同样的太阳/月亮开关会出现在 Close preview (Esc)（关闭预览 (Esc)）旁边。您也可以在全尺寸预览中检查两种调色板。

访问者的浏览器根据其操作系统级别的深色模式设置来决定他们看到的调色板。弹出窗口本身没有深色/浅色切换开关。网站可以强制为所有人使用一种配色方案，而不管操作系统设置如何。请参阅 Web SDK 文档中的 webPopups.colorScheme。

深色主题还会影响此面板中的图像、阴影和遮罩。启用后，每个都遵循相同的太阳/月亮配色方案开关。

放置和遮罩

选择弹出窗口在页面上的显示位置，以及是否调暗其背后的页面。

在 PLACEMENT（放置）中，使用 Position（位置）3×3 网格选择弹出窗口在页面上的锚定位置。
将 Edge offset（边缘偏移）设置为与所选边缘的距离（以像素为单位）。
在 OVERLAY（遮罩）中，打开 Dim the page behind（调暗页面背景）以在显示弹出窗口时使页面其余部分变暗，这在两种配色方案中都有效。关闭它会完全移除变暗效果，包括下面设置的任何深色方案值。
设置遮罩的 Color（颜色）和 Opacity（不透明度）（不透明度从 0 到 1）。

启用深色主题后，Color（颜色）和 Opacity（不透明度）也会跟随太阳/月亮配色方案开关。将开关设置为 Dark（深色），为深色调色板的变暗效果指定其自己的颜色和强度。在您编辑它们之前，深色方案会显示与浅色方案相同的 Color（颜色）和 Opacity（不透明度）。

深色
浅色