Axure RP8学习笔记三（实现简单的弹窗效果）

概述

首先还是得祝大家二〇一七新年快乐啦，本来是想在元旦的时候写的，咳，反正就拖到今天啦。这也是我二〇一七写的第一篇文章，就和大家分享一个很简单的小实例教程吧，当然可能很多地方都会用到，就是用Axure实现一个简单的弹窗效果。核心思路的话就是使用动态面板。

实现效果

这里就简单模拟一个修改密码然后需要弹窗提示的场景吧。可能有些丑然后文案逻辑都有些随意各位看官不要太介意。输入原密码，新密码和确认密码后点击确定修改，然后弹出一个确定修改的对话框。

弹窗效果演示.gif

核心思路

1. 由于我们需要在点击事件之后在原有页面上展示出一个原来没有的对话框，所以我们需要使用一个动态面板。
2. 动态面板只有一个状态State1，我们将对话框的样式设定好，然后放在动态面板的State1状态中。
3. 将动态面板的初始状态设置为不可见。然后再给相应的按钮添加点击事件，点击将动态面板的状态设置为可见。

准备工作

我们需要准备三个输入框以及两个按钮，然后为它们命好名编好组，为自己的元件规范命名还有编组是个蛮重要的习惯。

准备工作.png

步骤一

首先我们需要添加一个动态面板，由于该动态面板是要显示对话框的，我们就叫它对话框动态面板好了。

步骤一、添加对话框动态面板.png

步骤二

双击该动态面板，设置该动态面板的State1状态，添加相应的提示文字以及按钮，然后稍微调整下样式。

步骤二、设置动态面板的State1状态.png

步骤三

回到我们的主页面，选中动态面板，在样式(STYLE)下将动态面板的初始状态设置为不可见(hidden)。

步骤三、设置动态面板的初始状态为hidden.png

步骤四

给确认修改的按钮添加点击(click)事件，点击事件的内容为将动态面板设置为可见。然后可以在更多选择(More Options)里面可以设置一个灯箱效果(treat as lightbox)的效果，可以使弹窗的效果好些。

步骤四、设置动态面板为可见.png

这样完成之后其实弹窗效果就已经完成了，点击右上角的预览(preview)按钮看一下效果吧。

实现的弹窗效果.gif

步骤五

但仔细观察一下还稍微有点小瑕疵，我们的弹窗还没有方法可以关闭。那为了关闭弹窗我们就再多做一步吧。双击动态面板，重新编辑动态面的State1状态，设置取消按钮的点击事件，点击事件的内容为将动态面板设置为不可见。

步骤五、设置取消按钮的点击事件.png

总结

完成后的效果如下图所示，这个案例也比较简单，但是能够应用到的地方还是蛮多的。主要是利用了动态面板的隐藏以及出现的属性。

出现弹窗后取消的效果.gif