在制作原型的时候，经常会用到弹出框，对于初学者来讲，可能感觉弹出框实现的逻辑比较复杂，涉及到蒙层、隐藏/显示、居中显示等多个效果，尤其是在复制复用的时候感觉很麻烦，那么有没有一种方法能够方便快速的实现呢？当然是有的啦~~其实Axure中自带一种效果可以轻松的实现弹出框的效果，下面我们就来一起学习一下吧！
实现步骤
1、拖入矩形，调整矩形宽高【宽：400】、【高：200】（宽高可随意定，这里取比较常用的弹出框高度，可以拿小本本偷偷做做笔记哟~~）
2、拖入按钮、文字，放置合适的位置，如下图所示（一般按钮可组成组，成组快捷键：Ctrl+G）
3、切换元件库为【Icons】，找到关闭图标，拖入画布中，调整按钮宽高到合适尺寸这里设置为【宽：16】、【高：16】（记笔记啦~~）
4、选中矩形框、文字、按钮、删除图标，右键选择【转换为动态面板】，并命名为【弹出框】
5、选中【弹出框】动态面板，右键选择【固定到浏览器】
6、接上一步，勾选【固定到浏览器窗口】，选中水平固定【居中】，垂直固定【居中】，点击确定（此处用于设置弹出框能够固定在屏幕的居中位置，且不跟随屏幕内容的滚动而滚动）
7、选中弹出框，点击【隐藏】，拖入一个按钮（默认情况下弹出框是隐藏不可见的，点击按钮可显示弹出框）
8、重头戏来啦，此处是关键~~，选中弹出框按钮，添加交互事件【鼠标单击时】，添加动作【显示/隐藏】，选中【弹出框】动态面板，勾选【置于顶层】，更多选项选择【灯箱效果】，点击确定（此处设置灯箱效果是关键，这是axure自带的效果，可以给动态面板带上蒙层，蒙层的颜色也是可以设置的）
9、进入弹出框动态面板，选中删除按钮，添加交互事件【鼠标单击时】，添加动作【显示/隐藏】，选中【弹出框】动态面板，可见性选择【隐藏】，点击确定
到目前为止一个可显示可隐藏的弹出框就做成啦，有没有很简单~~），赶紧去试试吧！
原创文章，作者：院长大大，如若转载，请注明出处：https://www.axureschool.cn/28.html
赞 (5)
微信扫一扫 
支付宝扫一扫
【Axure8基础教程】如何去掉预览页面左上角的图片
上一篇
2019年7月12日 pm11:43
Axure RP 8.1.0.3388授权码/注册码，亲测有效长久激活
下一篇
2020年2月20日 pm7:58
评论列表（3条）
😀 😮
这个不就是正常的做法嘛，我还以为有什么简便的方法呢，骗人，哼
@巴诗雪：这个确实是常规，且比较便捷的做法呢，如果有更好的实现方法，欢迎投稿哦?