steam想申明库存量，不晓得在哪里去增设，那个出口处是稍稍有点儿深，由此可见毕竟也很单纯，一起来看一看什么样操作方式。操作方式方式01登入steam后，点选街道社区旁的对个人......
2024-02-05 552
如何使用Axure：[7]制作弹出窗口Modal
来源：互联网
2023-02-21 20:32:11 版权归原作者所有，如有侵权，请联系我们
当我们制作网站模型时，很容易就会遇到弹出窗口，一般情况下，在前端框架中，这种效果叫Modal。
工具/原料
- Axure
准备
打开Axure，创建一个新的RP文件
![如何使用Axure：[7]制作弹出窗口Modal](https://exp-picture.cdn.bcebos.com/ef4c24ceaad7726b89913d54bf0f64781523b9ca.jpg?x-bce-process=image/resize,m_lfit,w_500,limit_1/format,f_auto/quality,q_80)
拖入一个矩形，用于触发Modal弹出
![如何使用Axure：[7]制作弹出窗口Modal](https://exp-picture.cdn.bcebos.com/ba97ffd06de89a611756192045e8b004551badca.jpg?x-bce-process=image/resize,m_lfit,w_500,limit_1/format,f_auto/quality,q_80)
拖入一个矩形，并转换为动态面板，并命名为ModalPane
![如何使用Axure：[7]制作弹出窗口Modal](https://exp-picture.cdn.bcebos.com/555acf0ff2260d9aa87d4f2a622abab84340a5ca.jpg?x-bce-process=image/resize,m_lfit,w_500,limit_1/format,f_auto/quality,q_80)
进入ModalPane的状态state1中，设置已经存在的矩形的边框为「无边框」，设置其背景色为灰色，透明度为30%
![如何使用Axure：[7]制作弹出窗口Modal](https://exp-picture.cdn.bcebos.com/0cdb2f0e1799e92a26cb1af3e1fec314f0c5a0ca.jpg?x-bce-process=image/resize,m_lfit,w_500,limit_1/format,f_auto/quality,q_80)
添加一个矩形，作为弹出Modal，将其转换为动态面板
![如何使用Axure：[7]制作弹出窗口Modal](https://exp-picture.cdn.bcebos.com/6bbfdd14f1c595eee3b2ef9427530688902c9aca.jpg?x-bce-process=image/resize,m_lfit,w_500,limit_1/format,f_auto/quality,q_80)
进入到Modal的状态编辑界面，并绘制Modal的内容
![如何使用Axure：[7]制作弹出窗口Modal](https://exp-picture.cdn.bcebos.com/a48bc2e8904800fcdc84c0bdd42043715edb93ca.jpg?x-bce-process=image/resize,m_lfit,w_500,limit_1/format,f_auto/quality,q_80)
添加事件
在Modal动态面板中，为关闭按钮添加关闭事件
![如何使用Axure：[7]制作弹出窗口Modal](https://exp-picture.cdn.bcebos.com/3761a73acd8920c5927cd086568a59de440788ca.jpg?x-bce-process=image/resize,m_lfit,w_500,limit_1/format,f_auto/quality,q_80)
![如何使用Axure：[7]制作弹出窗口Modal](https://exp-picture.cdn.bcebos.com/589f5b07880138706e32623f2d08a50f95fc83ca.jpg?x-bce-process=image/resize,m_lfit,w_500,limit_1/format,f_auto/quality,q_80)
设置ModalPane的可见属性为隐藏
![如何使用Axure：[7]制作弹出窗口Modal](https://exp-picture.cdn.bcebos.com/2947750192dd33407b80c934881c99c0aefcf1ca.jpg?x-bce-process=image/resize,m_lfit,w_500,limit_1/format,f_auto/quality,q_80)
为「触发」按钮添加显示ModalPane的事件
![如何使用Axure：[7]制作弹出窗口Modal](https://exp-picture.cdn.bcebos.com/a9338a1fbee434da282d1290f271fe1d97d8e4ca.jpg?x-bce-process=image/resize,m_lfit,w_500,limit_1/format,f_auto/quality,q_80)
完成
按F5进行预览
![如何使用Axure：[7]制作弹出窗口Modal](https://exp-picture.cdn.bcebos.com/ff5c88d81819612078be54dd70f202b374d7dfca.jpg?x-bce-process=image/resize,m_lfit,w_500,limit_1/format,f_auto/quality,q_80)
以上方法由办公区教程网编辑摘抄自百度经验可供大家参考！
相关文章
- 详细阅读
-
ps快捷键大全与常用快捷键-ps常用快捷键大全和技巧详细阅读
操作方式方法01【辅助widget】多种辅助工具相连接两个功能键的可同时按【Shift】加此功能键挑选出1、正方形、圆锥选框辅助工具 【M】 2、终端辅助工具 【V】 3、截叶......
2024-02-05 482
-
qq头像上传失败怎么办-qq头像上传失败1503详细阅读
操作方式01文档格式难题qq肖像最合适用jpeg文档格式的相片，若是相片有透明化地下通道，能选用png文档格式上载。 02大小不一难题若是相片极重也可能将引致上载失利，检......
2024-02-05 408