弹窗效果如何实现?
2020-01-13 18:32:01

弹窗效果如何实现?

首先登录竹子建站,进入网站管理,开始设计网站。

进入设计之后,打开左上角的下拉箭头 ,找到站点管理,添加一个独立板块

 

添加好独立板块之后,设计独立板块中的内容,也就是弹窗需要显示的内容。如果需要弹窗也有三端样式,那么可以在设置内容的时候,同时设置一下手机端和iPad端的显示样式。

如下图,设置独立板块的手机端样式

设置好独立板块中的内容之后,发布一下,然后退出独立板块的编辑。

现在去设置弹窗。弹窗需要在哪里弹出来,点击什么内容才弹窗,还是鼠标移动过去就弹出,或者是在进入网站就弹出?

以下我将会一个情况一个情况的进行步骤说明。

1、进入网站就弹出

之前说到已经设置好了弹出内容(独立板块的内容)。在网站设计页面的左上方,打开下拉三角箭头,在网站管理中,找到网站设置。

在网站设置中,有一个交互功能,选择添加事件。

事件设置中,事件选择载入(除载入外还有点击,鼠标移除移入等),这个动作是说明在什么时候可以触发这个弹窗内容。载入就是指在打开网站的时候就显示。

目标元素选择独立板块(除独立板块之后还有组件,页面)

板块就选择刚刚设置的独立板块,动作设置为显示(除显示外,还有隐藏)。

事件设置中的尺寸表示的是弹窗显示的尺寸大小;

位置表示的是弹窗显示的位置相对于页面的位置。这个位置的参照是以页面最左上角点为准。x是指横向位置,y是指竖向位置。

设置好位置之后,保存设置,注意在保存事件设置之后,还需要保存网站设置,之后再发布网站预览弹窗效果。

 

2、点击某处内容出现弹窗

假设是点击某张图片之后,出现弹窗。还是刚刚设置好的独立板块为例。

点击图片,在图片的编辑栏中的设置中,选择交互

激活方式选择点击激活 ,之后在添加事件

事件设置中事件选择点击,其他设置和之前弹窗的设置基本一致。