Axure-弹框遮罩效果

lhyzbb

于 2018-08-07 10:06:21 发布

阅读量6k

点赞数

CC 4.0 BY-SA版权

分类专栏：产品文章标签： axure 弹框透明遮罩

本文链接：https://blog.youkuaiyun.com/liuhaiyan111/article/details/81476095

本文介绍了如何使用Axure创建弹框遮罩效果。通过转换矩形为动态面板并设置状态，实现遮罩层。接着添加登录按钮点击事件显示内容，设置内容初始为隐藏。最后，为弹框的关闭按钮添加点击事件，实现点击后弹框消失。按照这些步骤，即可完成简单的弹框遮罩交互效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近做的效果蛮多的，为了能有一个更深的印象，同时也为了能看到此篇文章的小伙计们给予相应的帮助，我决定以自己的方式将这些动态效果记录下来。方便自己也方便大家。
其实要实现弹框遮罩效果其实蛮简单的。具体的咱们来看下边的步骤吧！

步骤一：首先我们拖进来一个矩形，在里边我们稍微添加点内容，然后选中矩形，右键，将转为动态面板。
这里写图片描述
然后“双击”动态面板，并且给动态面板起一个名字“遮罩层”

步骤二：双击“State1”，然后按照图中的步骤依次操作;

步骤三：再拖进来一个矩形，里边内容自己随意定义，

步骤四：添加事件，当我们点击“登录”按钮时，添加点击事件，
这里写图片描述
步骤五：上图中我们点击按钮登录时，显示了一部分内容，所以默认的我们应该将他们设置为隐藏。