下载安卓APP箭头
箭头给我发消息

客服QQ:3315713922

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

作者:课课家教育     来源: http://www.kokojia.com点击数:3923发布时间: 2019-03-15 16:36:57

标签: Axure教程遮罩层

     下面教大家如何设置按钮弹出带遮罩层的对话框,一、点击按钮弹出带遮罩层的对话框,并根据个人要求命名和对编辑区的设置。二、页面上下左右滚动时设置动态面板弹出的对话框水平和垂直始终保持居中。实现步骤如下:

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

  2、把其中一个动态面板双击设置标签为“遮罩层”(可以根据自己来命名),并双击状态1进入编辑区域。Axure教程(9)遮罩层的弹出框的设置_Axure_教程_遮罩层_课课家  3、点击状态1里面建立了的矩形,设置网页和页面大小相同,以便完全遮盖区域;然后在工具栏中设置矩形边框为“无”,设置填充色的透明度为50%并选择填充色为灰色。(调透明度个人喜好)

状态设置  4、完成后关闭状态1编辑页面,选择另外一个新的动态面板,按照第2步对其命名并进入编辑设置;

  5、设置区域里面的矩形为合适大小,并拖入一个文本面板或矩形,当作关闭按钮;设置按钮onclick事件调为隐藏遮罩层和当前编辑的这个动态面板。编辑动态面板  6、关闭当前的编辑页面,再次选择作为对话框的这个面板鼠标右键进入编辑选项打开固定到浏览器。固定到浏览器  7、勾选固定到浏览器窗口,水平和垂直固定勾选居中并勾选保持在前面。(仅限于原型)勾选选项  8、拖入一个按钮矩形(文本面板)到编辑区,双击输入文字并“登录”;然后点鼠标右键顺序设置为置于底层;设置按钮onclick事件为显示遮罩层和对话框两个动态面板;

  9、按着ctrl选择两个动态面板(或者可以一个个设置),点鼠标右键点击编辑选项设置设为隐藏然后确定。

  10、生成原型就能看到动态面板的效果了。

  总结:固定到浏览器选项可以让动态面板无论页面怎么滚动怎么设置,只要总是停留在一个位置,那么网站两侧的对联广告,或者浮在页面上的浮动按钮、图片等,都能用这种方式来实现得到。有什么不明白的地方随时可以向我咨询或关注我们课课家在线教育

赞(23)
踩(1)
分享到:
华为认证网络工程师 HCIE直播课视频教程