建立固定定位的弹出窗口

了解如何触发点击动画来显示弹出窗口。

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

您将在本教程中学习到:

  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. 选择 没有任何展示 环境

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

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

麦宜云
Ewan Mak 的最新帖子 (查看全部)