UXPin＂width=

弹出

在本教程的第一部分中，您将学习如何创建cookie同意弹出窗口。然后，您将学习如何在页面滚动到指定位置时显示它。最后，我们将向您展示如何创建从屏幕一侧滑动的弹出窗口。

→下载本教程准备好的。uxp文件。

  1. 在画布上从左侧工具栏或按＂B＂关键。
  2. 现在，使用Alt＂我＂快捷方式添加图标。
  3. 转到Properties面板中的Icons部分，并将默认的cog更改为anX．
  4. 中添加两个按钮形式部分。你也可以使用Alt＂B＂快捷方式。
  5. 属性将所有元素组合在一起Ctrl＂G＂快捷方式并命名组饼干横幅．

添加交互

  1. 选择X图标，然后转到属性面板的顶部添加一个交互。
  2. 将触发器设置为点击(Tap)．
  3. 在Action部分中，选择隐藏．
  4. 下面，在元素中选择饼干横幅．
  5. 作为动画，选择褪色．
  6. 在“动画设置”中，设置持续时间150毫秒。
  7. 点击添加．

将交互粘贴到按钮

  1. 右键单击X图标打开上下文菜单并进行选择复制的交互．
  2. 将交互分别粘贴到每个按钮上。从上下文菜单中选择粘贴然后粘贴的交互．
  3. 预览你的设计。

滚动中弹出

如果希望在窗口滚动到某个位置时弹出窗口显示，首先需要将其设置为固定位置通过单击属性面板中的Pin图标，用眼睛图标隐藏它，然后添加一个交互。

添加交互

  1. 控件在画布上添加交互+图标在属性面板的顶部。
  2. 当触发器选择滚动．
  3. 在滚动到，在您希望弹出窗口显示的位置中键入部分。
  4. 作为动作，选择显示．
  5. 下元素，选择你的弹出窗口。
  6. 选择褪色效果如动画。
  7. 点击添加预览你的原型。

滑动弹出式

创建一个弹出的电子邮件输入还有一个水平箭头图标这将发送输入的地址。

使弹出式滑动

  1. 选择弹出窗口，并在x轴字段中使用数学运算将其移动到画布之外+ 650．
  2. 然后，转到属性面板添加一个交互。
  3. 作为触发者，选择页面加载．
  4. 在行动,部分选择更多的并选择的举动．
  5. 下元素选择弹出窗口。
  6. 在Move by部分中，你需要减去步骤1中添加的x轴值。即。-650年．
  7. 在Delay字段中，输入2000并点击添加．

弹出式幻灯片

  1. 选择水平箭头图标并添加另一个交互。
  2. 作为触发者，选择点击(Tap)．
  3. 在行动,部分选择更多的并选择的举动．
  4. 下元素选择弹出窗口。
  5. 在Move by部分中，您需要在x轴上添加值，以使弹出窗口滑出画布。
  6. 在Duration字段中，键入1000并点击添加．
  7. 预览你的原型。
Baidu
map