文档章节

Axure遮罩 or 灯箱

chro008
 chro008
发布于 04/10 11:34
字数 493
阅读 32
收藏 0

在做原型设计的时候,常常需要设计弹窗(比如confirm、alert或者弹出面板),加一个全屏的遮罩可以突出要展示的内容,效果会更好一些,类似下面这种效果:

目前有2种方法:原始手动和axure自带效果(灯箱)

1:手动

需要创建2个动态面板,1个是遮罩面板,一个是弹框面板。动态面板这里就不介绍了,不会的朋友可以自行百度。在弹框面板下,正常设计需要的弹框,如上方的登录弹框,遮罩面板的宽高设置大一些,然后2个面板都设置固定在浏览器居中(水平、垂直),如下:

注意层级关系,弹框的层级要比遮罩高一些。

到这里基本就完成了,设置2个面板初始隐藏,页面增加一个元件,点击之后展示这2个动态面板就ok了。效果如下:

2:自带灯箱效果:

在Axure6.5(百度的)以后,增加的这个功能,与手动创建相比少了一个遮罩的面板,其实就是将手动创建的遮罩进行了封装。

在点击弹出弹窗面板的元件的时候,设置展现弹窗面板,下面有个选项是选择效果,这里选择灯箱即可,还可以编辑遮罩的颜色和透明度等,如下图:

设置完之后预览效果大致如下:

ps:发现自带的灯箱效果,点击遮罩也会关闭弹窗,这里需要注意一下。

© 著作权归作者所有

chro008

chro008

粉丝 5
博文 46
码字总数 19512
作品 0
海淀
程序员
私信 提问
Axure 制作app侧滑菜单

移动app中关于“菜单”的设计有很多种类,其中侧滑菜单是很常见的一种设计方式,本文以淘宝的筛选菜单为例,使用axure实现效果。 为了节约时间,排除干扰,我们就不拖入其他元件了,直接插入...

狄睿鑫老师
2017/03/29
0
0
JS三教九流系列-jquery实例开发到插件封装1

我们先写实例,然后在分装为插件,最后做更高级的处理! 封装插件基础学习 http://my.oschina.net/u/2352644/blog/487688 效果目录: 1.tab切换效果的实例和封装 2.带左右按钮图片滚动效果的...

透笔度
2015/08/11
353
0
axure 制作滚动效果(不显示滚动条)

笔者在上一篇文章《axure制作app侧滑菜单》中介绍了淘宝app筛选菜单的制作方法,但筛选菜单中的内容仅仅填充了“一屏”的内容,如果内容比较多,就需要菜单能够上下滚动,且仅仅是菜单部分滚...

狄睿鑫老师
2017/03/30
0
0
jQuery实现带遮罩层的消息框滑入滑出效果

首先,使用一个遮罩层来遮住整个页面,在遮罩层上显示一个消息框,消息框还可以被关闭,最后使用jQuery使得消息框从页面顶部滑下,实现的效果如下: 遮罩层的样式如下: 样式说明了不论在哪种...

罗盛力
2012/02/17
1K
1
一行代码实现 UIView 镂空效果

这是一种实现 镂空效果的方案,可以快速实现任意形状的镂空、文字的镂空、带镂空的毛玻璃效果等。本质上是 的 效果的「取反」。 前言 首先来复习一下遮罩效果的实现。如果我们有一张图片,又...

雷曼同学
2018/11/11
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Echars鼠标点击事件多次触发

本文转载于:专业的前端网站➭Echars鼠标点击事件多次触发 gChart.on('click', function (params) { if (params.componentSubType == "bar" && params.componentType == "serie......

前端老手
25分钟前
4
0
springboot2.0.6(附) 解析META-INF/spring.factories通过系统加载类获取对应的 class 的全限定名称

在 SpringBoot中是通过getSpringFactoriesInstances(Class<T> type)方法获取所有classpath下面的META-INF/spring.factories文件,然后根据type值找到对应的 class 的全限定名称列表。下面我来...

小亮89
27分钟前
4
0
zk工厂方法实现NIOServerCnxnFactory

NIOServerCnxnFactory类 内部类 AbstractSelectThread AcceptThread SelectorThread 属性 ZOOKEEPER_NIO_SESSIONLESS_CNXN_TIMEOUT 10s session过期时间 ZOOKEEPER_NIO_NUM_SELECTOR_THREADS......

writeademo
30分钟前
4
0
天猫精灵业务如何使用机器学习PAI进行模型推理优化

作者:如切,悟双,楚哲,晓祥,旭林 引言 天猫精灵(TmallGenie)是阿里巴巴人工智能实验室(Alibaba A.I.Labs)于2017年7月5日发布的AI智能语音终端设备。天猫精灵目前是全球销量第三、中国...

阿里云官方博客
38分钟前
6
0
BJL技巧之大路馆擦法—《利辰逸》

很多朋友刚玩百佳时间不长,不知道如何看路,今 天我就来简单的讲下看大路的方法。 都是前辈教的,这里我只是简单复述一下。 大路的观察方法有以下几种: 先从庄闲的数量变化说起。 庄闲的强...

那女孩对我说
38分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部