灯箱 | Lightbox

当一个灯箱模式的消息、图片或视频显示的显示的时候,页面的其他部分会变暗,点击变暗的区域可以关闭灯箱并且将页面恢复到之前的状态。

STEP0:下载练习文件

如果你还没有练习文件,请下载Axure Training.rp并在Axure RP中打开它,该文件包含了Axure培训网站上每个教程的对应页面。我们建议你始终使用我们准备好的文件来学完教程,但是如果你无法保证,那也没有关系,我们也会告诉你在不使用Axure Training.rp文件的情况下,如何创建新文件来完成教程。

STEP1:开始

在练习文件中打开“灯箱”页面。

这个页面包含了一个按钮和一个动态面板,动态面板中有一张地图图片。

选中动态面板,在样式页签下点击“隐藏”的复选框,将动态面板隐藏。

STEP2:设置灯箱的交互

选中“在地图上查看”按钮,然后再属性页签下双加“鼠标单击时”来添加一个新的鼠标单击时事件。

在左侧的“添加动作”栏中,点击“显示”动作,在右侧的“配置动作”栏中,点击动态面板。

在右侧“配置动作”栏的底部,使用“更多选项”的下拉列表选择“灯箱效果”,然后会出现一个“背景色”的颜色选择器,这个选择器是用来选择覆盖在灯箱之外的页面区域的颜色,默认颜色是带有61%不透明的#2F4F4F(深灰色),这里保持默认设置然后继续后面的操作。

点击“确定”按钮关闭对话框,此时你可能想预览一下,以确保你的灯箱可以正常工作。

STEP3:将灯箱固定在窗口居中位置

有时候,将灯箱固定在窗口的居中位置,以便即使页面滚动,它都可以显示在固定的位置,接下来学习如何实现这个效果。

选中动态面板,在属性页签下,点击“固定到浏览器”。

在“固定到浏览器”对话框中,勾选“固定到浏览器窗口”的复选框,然后“水平固定”选择“居中”,“垂直固定”选择“居中”。

点击“确定”按钮关闭对话框。

STEP4:预览

点击“预览”按钮,然后点击“在地图上查看”按钮,以灯箱效果显示地图,点击灯箱之外的任何区域来关闭它,我们也可以在右上角制作一个“关闭”按钮功能,来隐藏动态面板以关闭灯箱。

评论(0)

发表评论

电子邮件地址不会被公开。 必填项已用*标注