Axure--实现简单的弹窗效果

实现效果

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

核心思路

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

步骤一

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

步骤二

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

步骤三

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

步骤四

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

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

步骤五

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

总结

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