当我们制作网站模型时,很容易就会遇到弹出窗口,一般情况下,在前端框架中,这种效果叫Modal。
工具/原料
Axure
准备
1、打开Axure,创建一个新的RP文件
![如何使用Axure:[7]制作弹出窗口Modal](https://exp-picture.cdn.bcebos.com/ef4c24ceaad7726b89913d54bf0f64781523b9ca.jpg)
2、拖入一个矩形,用于触发Modal弹出
![如何使用Axure:[7]制作弹出窗口Modal](https://exp-picture.cdn.bcebos.com/ba97ffd06de89a611756192045e8b004551badca.jpg)
3、拖入一个矩形,并转换为动态面板,并命名为ModalPane
![如何使用Axure:[7]制作弹出窗口Modal](https://exp-picture.cdn.bcebos.com/555acf0ff2260d9aa87d4f2a622abab84340a5ca.jpg)
4、进入ModalPane的咽疖纲掇状态state1中,设置已经存在的矩形的边框为「无边框」,设置其背景色为灰色,透明度为30%
![如何使用Axure:[7]制作弹出窗口Modal](https://exp-picture.cdn.bcebos.com/0cdb2f0e1799e92a26cb1af3e1fec314f0c5a0ca.jpg)
5、添加一个矩形,作为弹出Modal,将其转换为动态面板
![如何使用Axure:[7]制作弹出窗口Modal](https://exp-picture.cdn.bcebos.com/6bbfdd14f1c595eee3b2ef9427530688902c9aca.jpg)
6、进入到Modal的状态编辑界面,并绘制Modal的内容
![如何使用Axure:[7]制作弹出窗口Modal](https://exp-picture.cdn.bcebos.com/a48bc2e8904800fcdc84c0bdd42043715edb93ca.jpg)
添加事件
1、在Modal动态面板中,为关闭按钮添加关闭事件
![如何使用Axure:[7]制作弹出窗口Modal](https://exp-picture.cdn.bcebos.com/3761a73acd8920c5927cd086568a59de440788ca.jpg)
![如何使用Axure:[7]制作弹出窗口Modal](https://exp-picture.cdn.bcebos.com/589f5b07880138706e32623f2d08a50f95fc83ca.jpg)
2、设置ModalPane的可见属性为隐藏
![如何使用Axure:[7]制作弹出窗口Modal](https://exp-picture.cdn.bcebos.com/2947750192dd33407b80c934881c99c0aefcf1ca.jpg)
3、为「触发」按钮添加显示ModalPane的事件
![如何使用Axure:[7]制作弹出窗口Modal](https://exp-picture.cdn.bcebos.com/a9338a1fbee434da282d1290f271fe1d97d8e4ca.jpg)
完成
1、按F5进行预览
![如何使用Axure:[7]制作弹出窗口Modal](https://exp-picture.cdn.bcebos.com/ff5c88d81819612078be54dd70f202b374d7dfca.jpg)