Content Table

Axure 创建弹窗

Axure 创建弹窗,主要涉及以下几个方面:

  • 弹窗内容的元素放到动态面板里,这样所有元素都是动态面板的子元素,通过隐藏和显示动态面板来控制弹窗及其内容的可见性
  • 弹窗在页面中是可见的,页面加载的时候隐藏弹窗,需要的时候才显示弹窗。这样编辑的时候可以看到弹窗的内容,否则就是一个黄色块,不方便编辑与查看
  • 弹窗在所属页面的放置位置,不要挡住其他内容,放到页面的旁边即可
  • 弹窗的动态面板居中显示 (Pin to Browser)
  • 如果是需要重复使用的弹窗,可以创建为模板 (Master),或者根据分模块的思想,也可以把弹窗直接作为 Master,然后在页面中引用

下面我们实现一个如图的弹窗功能:

创建弹窗

创建弹窗:

  1. 首先创建一个动态面板的模板,命名为 loginDialog
  2. 在上面放上登陆弹窗的组件
  3. 设置动态面板的属性,点击 Pin to Browser 设置弹窗显示事的位置为屏幕居中,可以修改 Margin 的值,相对于居中进行偏移微调,让效果更能符合自己的需求

使用弹窗

在页面中使用弹窗:

  1. 创建一个页面
  2. 建议设置页面的尺寸为固定的,例如 Web,或者 iPhone8 等
  3. 在页面上放一个和页面宽度一样的矩形,在此矩形上布局我们的控件
  4. 把登陆窗口模板拖动到页面里,放在页面的旁边,不要遮挡页面中的其他内容,例如表格等
  5. 设置显示弹窗的交互 (例如点击按钮) 时,在 MORE OPTIONS 里选择 treat as lightbox (聚光灯效果),这样弹窗显示时背景是半透明的遮罩

页面的上部是一个 Header 的模板,大家可以尝试下自己实现,其中:

  • 模板中点击按钮登陆发出事件 onLogin (raiseEvent)
  • 页面中对 onLogin 添加弹窗的显示动作

参考资料

Axure 9 全面教程:所有功能讲解+高级效果实现,这个视频非常不错,快速的介绍了 Axure 的核心功能。