【产品】原型设计之Axure如何通过动态面板实现弹框

1、打开Axure软件,从元件库中拉出一个矩形框和按钮,矩形框是为了展示主页的内容,按钮是为了点击后弹出对话框的效果,如下图所示:

2、从元件库中拉出一个动态面板,放在页面上,摆放位置可以根据需要进行摆放,也可以通过设置,使其在页面上居中显示,如下图所示:

3、双击动态面板,将弹出如下对话框,先为动态面板定义一个名称,这个名称等会在设置显隐的时候需要用到。

然后再单击"state1"会弹出另一个新的子页面,就可以在该页面中增加弹出框的具体内容,如下图所示:

4、鼠标右键点击动态面板,把动态面板设置成隐藏,具体操作如下图所示:

5、选中按钮,在右边的设置面板中,双击“鼠标单击时”按键,页面将会弹出新的用例编辑窗口,选择元件的“显示/隐藏”,找到刚刚的动态面板,并将其设置为显示。

6、在动态面板中放置一个按钮,该按钮的作用就是点击后自动关闭弹出框,将“显示”改成了“隐藏”。

7、配置完后,点击预览,在浏览器上点击“打开新窗口”按钮,页面将弹出新的对话框如下截图,点击“关闭窗口”将关闭该页面。

refer:

https://jingyan.baidu.com/article/aa6a2c14956d3f0d4c19c4a9.html

发布了343 篇原创文章 · 获赞 302 · 访问量 52万+

猜你喜欢

转载自blog.csdn.net/liwei16611/article/details/104227935