Axure教程 带遮罩层的弹出框(9)

起点学院产品经理365成长计划,2天线下闭门集训+1年在线学习,全面掌握BAT产品经理体系。了解详情

示例原型下载:小楼Axure原创元件-带遮罩层的弹出框

实现目标:

1、   点击按钮弹出带遮罩层的对话框;

2、   页面上下左右滚动时,弹出的对话框水平和垂直始终居中。

实现步骤如下:

1、 拖入编辑区2个矩形,并点右键—转换—转换为动态面板;

2、 双击其中一个动态面板设置标签为“遮罩层”(看个人喜好随便命名),并双击状态1进入编辑;

1

3、 点击状态1里面的矩形,设置大小与网站页面大小相同,以便完全遮盖;然后,设置矩形边框为“无”;最后设置填充色的透明度为50%(看个人喜好),并选择填充色为灰色(看个人喜好);

2

4、 关闭状态1编辑页面,选择另外一个动态面板,按照第2步命名并进入编辑;

5、 设置里面的矩形为合适大小,并拖入一个按钮(或者矩形/文本面板)作为关闭按钮;设置按钮onclick事件为隐藏遮罩层和当前编辑的这个动态面板;

3

6、 关闭当前的编辑页面,再次选择作为对话框的这个面板—右键—编辑选项—固定到浏览器…;

4

7、勾选固定到浏览器窗口,水平和垂直都选择居中,并勾选“保持在前面”;

5

 

8、 拖入一个按钮(或者矩形/文本面板)到编辑区,双击输入文字“登录”;然后点右键—顺序—置于底层;设置按钮onclick事件为显示遮罩层和对话框这两个动态面板;

9、 按着ctrl选择两个动态面板(或者挨个设置),点右键—编辑选项—设为隐藏。

10、 好了,生成原型就能看到效果了。

扩展:固定到浏览器选项可以让动态面板无论页面怎么滚动,总是停留在一个位置,那么网站两侧的对联广告,或者浮在页面上的一些按钮、图片等,都能用这种方式来实现。

本文作者:@小楼;转载自:Axure原创教程网

新手入门基础教程目录

Axure教程 axure新手入门基础(1)

Axure教程 axure新手入门基础(2

Axure教程 axure新手入门基础(3)

Axure教程 axure新手入门基础(4)

Axure教程 axure新手入门基础(5)

Axure教程 关于Axure rp触发事件中IF和ELSE IF的使用说明(6)

Axure教程 axure元件使用思路的补充(7)

Axure教程 动态面板的用途(8)

Axure教程 带遮罩层的弹出框(9)

Axure教程 动态面板滑动效果(10)

更多Axure学习技巧:Axure专栏

您的赞赏,是对我创作的最大鼓励。

评论( 15

登录后参与评论
  1. 没会用。。。蛋碎一地,实例也过期了,咋办?要么我留给邮箱发我下?373600997@qq.com

    回复
  2. 请问那个遮罩的作用是什么呢?

    回复
  3. 事例原型下载链接失效了,请博主更新一下链接。谢谢。。。

    回复
  4. zzzzzzzzz

    回复
  5. :???: 我是完全看不懂。。。

    回复
  6. 吐槽的人也是醉了,软件版本不同,使用汉化版本的不同本来就会造成差异,写教程的人不可能面面俱到,碰到与自己软件版本不一样的地方自己动脑想一下百度一下什么的不就好了吗?如果发现不对的地方在留言里指出也比单纯吐槽楼主不用心好多了。u can u up, no can no bb。

    回复
  7. 试了一下,怎么只有作为对话框的那个才可以固定呢,还是我做错了

    回复
  8. 截图太小 看不见 费眼!!!!!!!!!!!!!!!!!!大神考虑考虑读者!!!!!!!!

    回复
  9. 回复
  10. 想写教程就专业点,好吗?

    回复
  11. 完全没必要这么搞!直接显示效果选为灯箱就行

    回复
    1. 回复

      6.5哪有灯箱效果?

  12. 用了很久自己才搞出来 模块名字太模糊

    回复
  13. 教程写的太乱,完全看不懂

    回复
  14. 请问一下 6.5中我知道悬停固定位置 7.0中在哪 实在没找到

    回复
加载中