建立固定定位的弹出窗口

我们将指导您制作一个略显独特的弹出窗口 — 由用户启动的弹出窗口。用户通过单击按钮触发弹出动画，从而显示表单。（您可以随时根据您的要求修改触发器。）

您将在本教程中学习到：

1. 构建固定模态
2. 将按钮集成到您的项目中
3. 配置弹出触发器
4. 组织弹出动画
5. 配置关闭动画

构建固定模态

要为您的内容创建覆盖，您可以按照以下 3 个步骤操作：

1. 开发弹出包装器
2. 包含表单元素
3. 创建“关闭”链接

开发弹出包装器

插入 分区块 作为模式的包装器，使用键盘快捷键 A 访问 添加面板 （或点击左上角的加号图标）并拖动 分区块 元素融入到您的项目中。

为了更好地组织您的项目，定位 分区块 在 Body 元素的顶部（虽然不是强制性的，但这种做法有助于组织元素）。将元素拖到 航海家 并将其放置在 Body 元素.

选择 分区块，为其分配一个类名，如“弹出包装器”，并在 样式面板:

• 显示：弹性
• 弹性布局：垂直、居中、居中（使表单垂直居中）

滚动浏览 样式面板 配置其他样式设置，确保包装器占据整个视图：

• 位置：固定，满
• Z-index：9999（将包装器置于项目中所有其他元素之上）

应用背景颜色，使弹出窗口在项目中的其余内容中脱颖而出。尝试使用 #000000 和 80% 不透明度 — 或适合您项目的任何其他背景颜色。

包含表单元素

要弹出表单，您需要 形式 包装器内的元素。

选择包装器，插入 形式 使用快速查找功能：

1. 按 命令 + E （在 Mac 上）或 Control + E （在电脑上）
2. 搜索“表格”
3. 选择 形式 元素并将其放置在“弹出包装器”内（由于包装器上的先前样式， 形式 将利用 Flexbox 进行居中）
4. 设计表单以适合您的项目（例如，将最大宽度限制为 500 像素，并将宽度设置为 100%）

通过组合这些样式，您的表单将被限制在 500 像素（最大宽度）以内，同时可响应各种设备尺寸（100% 宽度）。了解有关 Webflow 中响应式设计的更多信息。

创建“关闭”链接

接下来，让我们插入一个文本链接，以便用户在提交表单后关闭弹出窗口。

为了实现此目的，拖动 文字链接 在里面 航海家 到我们的“弹出包装器”的顶部（再次强调，虽然不是强制性的，但这种做法有助于组织元素）。

选择链接后，为链接分配一个类名（例如，弹出关闭）并应用一些样式：

• 位置：绝对
• 上衣：5%
• 右：5%
• 底部：自动
• 左：自动

通过利用这组样式，您可以将关闭链接保持位于弹出包装器的顶部。

此时，弹出窗口的所有元素均已创建。继续将“弹出窗口包装器”的显示样式更改为 没有任何 以便在不使用时将其隐藏。

使“弹出包装器”的不透明度为 0%，这将为您在交互时创建平滑的淡入动画做好准备。

在您的项目中插入一个按钮

项目设置的最后一步是添加一个元素，例如一个按钮，以便在单击时触发弹出窗口。 

要合并按钮：

1. 按 A 在您的键盘上访问 添加面板 （或点击设计器左上角的 + 图标）
2. 拖动 按钮 元素到项目中所需的位置

配置弹出触发器

将按钮添加到项目后，您现在可以建立交互，以便在单击按钮时触发弹出窗口。

过去，交互需要复杂的 JavaScript 库，需要各种工具、插件，并且需要花费大量时间学习编码。使用 Webflow，我们可以直观地创建弹出式交互。

首先，选择画布上的按钮。随后，点击交互符号以显示交互面板

在 相互作用 面板上，点击 + 图标 元素触发器，然后选择 鼠标单击 选择。

建立弹出动画

虽然 Webflow 提供了一些预设交互，但您可以创建自定义交互来显示弹出窗口。单击按钮后，弹出窗口将逐渐淡入。要实现这一点，请在 第一次点击 - 选择 行动 下拉列表并选择 开始动画 选项。随后，按 + 图标以合并我们的定时动画

您现在可以为动画指定一个名称（例如，弹出），然后选择要设置动画的元素。 

笔记：确保在交互面板处于活动状态时选择元素。

对于此项目，请从 航海家。随后，点击旁边的 + 图标 操作，然后选择 不透明度 （这将最初设置不透明状态）。

首先，让我们考虑一下时间（注意面板底部的时间显示）。首先激活 设置为初始状态 切换，并将值分配给 0%.

接下来，选择 操作，然后选择 隐藏/显示 （显示隐藏的弹出窗口 - 其不透明度保持隐藏）。确保设置 展示 作为 柔性.

要完成最后一项任务，请将不透明度从 0% 转换为 100%。要执行此操作，请选择旁边的 + 符号 操作，然后选择 不透明度 （自动调整为 100%）。

最后，点击 完毕 按钮，然后继续发布项目。现在点击按钮后，您的弹出窗口就会出现。不过，您还不能关闭它；因此，请在“弹出窗口关闭”链接上建立交互。

准备闭合动画

要构建关闭交互，首先，定位到 航海家.

随后，介绍点击链接后关闭弹窗的交互。 

按着这些次序：

1. 点击 相互作用 图标来揭开 相互作用 控制板
2. 选择 鼠标单击 选项
3. 来自 行动 下拉，选择 开始动画
4. 然后，点击 + 符号添加定时动画
5. 标记动画（例如，关闭弹出窗口）
6. 在里面 相互作用 面板中，突出显示“弹出包装器”元素 航海家
7. 包括 不透明度 选择旁边的 + 图标即可 操作
8. 将不透明度调整为 0%
9. 通过选择旁边的 + 图标添加另一个操作 操作，然后点击 隐藏/显示
10. 选择 没有任何 在 展示 环境

最后，点击 完毕 按钮，然后重新发布项目以测试弹出窗口。

开发固定定位的弹出窗口做得非常好。干得好！