登录| 注册
当前位置：
  1. 北极熊素材库
    2. →
  2. 教程
    1. Photoshop
    2. Lightroom
    3. PageMaker
    4. Autodesk Maya
    5. Premiere
    6. InDesign
    7. Adobe Audition
    8. Axure
    9. Illustrator
    10. Lumion
    11. 3ds Max
    12. Character Animator
    13. Motionbuilder
    14. Sketch
    15. CorelDraw
    16. After Effects
    17. Blender
    18. Auto CAD
    19. Dreamweaver
    3. →
  3. Axure
    1. 基础入门
    2. 动态面板
    3. 中继器
    4. 实例教程
    4. →
  4. 动态面板
    5. →
  5. Axure制作弹出框操作实例

Axure制作弹出框操作实例

0 2021-08-24 11:47 内容校对：海绵宝宝手里的锅铲
收藏（0） 共有 65 人学习了本教程

《Axure制作弹出框操作实例》是一篇关于Axure的学习教程，通过简单几步就能实现教程中的效果图效果，当然只学习这一点，并不能完全掌握Axure技巧；你可以通过此加强界面组成，元件，动态面板等多维度案例或实操来进行更多的学习；此教程是由zzz在2021-08-24发布的，目前为止更获得了 0 个赞；如果你觉得这个能帮助到你，能提升你Axure技巧；请给他一个赞吧。

在制作原型的时候，经常会用到弹出框，对于初学者来讲，可能感觉弹出框实现的逻辑比较复杂，涉及到蒙层、隐藏/显示、居中显示等多个效果，尤其是在复制复用的时候感觉很麻烦，那么有没有一种方法能够方便快速的实现呢？
当然是有的啦~~其实Axure中自带一种效果可以轻松的实现弹出框的效果，下面我们就来一起学习一下吧！

实现步骤

1、拖入矩形，调整矩形宽高【宽：400】、【高：200】（宽高可随意定，这里取比较常用的弹出框高度，可以拿小本本偷偷做做笔记哟~~）

Axure制作弹出框操作实例

2、拖入按钮、文字，放置合适的位置，如下图所示（一般按钮可组成组，成组快捷键：Ctrl+G）

Axure制作弹出框操作实例

3、切换元件库为【Icons】，找到关闭图标，拖入画布中，调整按钮宽高到合适尺寸这里设置为【宽：16】、【高：16】（记笔记啦~~）

Axure制作弹出框操作实例

4、选中矩形框、文字、按钮、删除图标，右键选择【转换为动态面板】，并命名为【弹出框】

Axure制作弹出框操作实例

5、选中【弹出框】动态面板，右键选择【固定到浏览器】

Axure制作弹出框操作实例

6、接上一步，勾选【固定到浏览器窗口】，选中水平固定【居中】，垂直固定【居中】，点击确定（此处用于设置弹出框能够固定在屏幕的居中位置，且不跟随屏幕内容的滚动而滚动）

Axure制作弹出框操作实例

7、选中弹出框，点击【隐藏】，拖入一个按钮（默认情况下弹出框是隐藏不可见的，点击按钮可显示弹出框）

Axure制作弹出框操作实例

8、重头戏来啦，此处是关键~~，选中弹出框按钮，添加交互事件【鼠标单击时】，添加动作【显示/隐藏】，选中【弹出框】动态面板，勾选【置于顶层】，更多选项选择【灯箱效果】，点击确定（此处设置灯箱效果是关键，这是axure自带的效果，可以给动态面板带上蒙层，蒙层的颜色也是可以设置的）

Axure制作弹出框操作实例

9、进入弹出框动态面板，选中删除按钮，添加交互事件【鼠标单击时】，添加动作【显示/隐藏】，选中【弹出框】动态面板，可见性选择【隐藏】，点击确定

Axure制作弹出框操作实例

到目前为止一个可显示可隐藏的弹出框就做成啦，有没有很简单~~），赶紧去试试吧！

Axure制作弹出框操作实例

以上就是Axure制作弹出框操作实例的全部内容介绍了，关于更多Axure教程信息，欢迎关注北极熊素材库，给你带来最丰富的素材图片和最有用的教程，更多最新资讯。
0

赠人玫瑰，手有余香

本内容由zzz原创发布，小编仅对内容版式进行调整，如有侵犯你的权利，请联系我们。

本文标签

弹出框 动态面板 元件 界面组成

如果你觉得好，你可以将本课程转发给你的朋友!

< 上一篇 Axure制作APP折叠面板 axure手风琴制作教程操作实例

> 下一篇 Axure教程：忘记密码特效

参与评论
验证码

输入的验证码不正确

0/10000

评论区

暂无评论

zzz
zzz

睡不醒的灰姑凉，带你学设计

共发布了219个文章 共获得30个赞

最新发布的教程

ps复制的文字自动换行的操作方法

2022-06-23 10:12

ps把图案连带颜色做成画笔的方法

2022-06-20 10:01

查看更多此作者的教程

文章中所需的素材

文章中所使用的软件

或许你对这些其他设计教程感兴趣

猜你想学

学习人数最多的教程

用户给我们的评价
北极熊素材库累计为超过1000+家中小企业提供服务
欢迎来到北极熊素材库

使用微信扫码登录

使用账号密码登录

请输入用户名，6-15个字符

请输入密码，最少6-15个字符

立即注册 | 找回密码

登录失败

注册及代表同意 网站协议
扫码登录及代表同意 网站协议
找回密码
记起来了，现在登录

请输入用户名，6-15个字符

请输入绑定的邮箱

验证码

输入的验证码不正确

登录失败

提示信息

内置密码的链接已通过Emall 发送到你的邮箱中，请在三天内修复密码。

3秒后，将关闭此窗口 立即关闭

立即注册
已有账户，现在登录

请输入用户名，6-15个字符

请输入密码，最少6-15个字符

二次密码不一致

请输入正确的邮箱

验证码

输入的验证码不正确

注册失败

您还不是我们的VIP会员

成为我的的VIP会员
即可享受6大特权并免费高速下载数以万计的设计素材，助力您的工作和学习

立即升级VIP会员
关于我们
网站导航
客服咨询

20120

会员数量

36650

素材数量

170

下载数量

220

作者数量

13108

教程数量

37

学习人数

© 2017-2021, 北极熊素材库(bjxku.com) LLC. copyright@ www.bjxku.com 渝ICP备20008086号-8 公安部网络违法犯罪举报网站 公安部网络违法犯罪举报网站 渝公网安备 50010702504641号 不良信息举报 不良信息举报
Creative Commons