起飞页中的弹窗技术

发布日期:2016-12-14
浏览次数:112
  

弹窗的分类

 
起飞页系统目前支持3种类型的弹窗,分别是:
 
1、悬浮式
悬浮在页面上,同一个页面可以有多个。常用来做浮动的头部,顶部和侧栏的内容。用户不关闭弹窗的时候,也可以正常浏览网站。
 
2、遮罩式,
遮罩式弹窗出现在页面的时候,会遮住页面上的所有内容。用户如果不关闭弹出,则无法正常浏览网站。
3、漂浮式
弹窗会飘来飘去。呵呵。
 
 
弹窗很适合显示重要信息,或者您需要用户确认的信息。
 
 
 

如何修改弹窗内容之简单HTML

 
默认的,在您创建了一个弹窗之后,可以看到的内容是,这是一个弹窗通知。事实上,在弹窗中,我们不仅可以放文字,还可以放图片,或者是其他页面元素,甚至是表单。如果你只想放一些文字,或者一张图片,那是非常简单的。接下来我们来介绍如何在弹窗中修改文字或者图片。
 
第一步,点击弹窗的设置按钮,
第二步,切换到内容选项卡
 
此时要确保选择通知内容的类型为简单HTML。如果选择下面两种类型的话,就相对复杂了,我们过会儿再说。
 
 
正如您看到的,通过修改html代码,你就可以修改弹窗中的内容。如果您不知道如何写html代码,也没有问题。你可以先把内容写到一个文本组件中,然后复制文本组件生成的HTML代码到这里,就可以了。
 
相应的,您可以指定一张图片作为弹窗的背景图片。这样您不仅可以在弹窗中显示文字,也可以在弹窗中使用图片。
 
简单html类型的内容,非常适合,只需要显示一段文字或者一张图片的情况。如果,您的实际需求比较复杂,那么我们可以使用页面组件技术来实现这个功能。
 
 

如何修改弹窗内容之页面组件

 
弹窗其实是一个公共区域,不仅可以在某个页面内使用,还可以在多个页面中使用。页面组件技术,常被用来解决如何定义一个公共内容区域中的中型大小的容器中的内容。
 
如果需要将弹窗的内容和某个页面内容进行关联,我们仅需要将弹窗内容的类型设置为页面组件类型。
 
如果,对应页面中只包含图片和文字,那么您可以使用简单组件页面类型;而如果页面中的内容非常复杂,含有表单,幻灯片比较复杂的组件,那么,您可以考虑使用复杂组件页面。当然凡事有利必有弊,复杂组件页面的加载,比简单页面组件,要慢一些。但如果不是仔细观察,一般也不会发现。
 
 
在选择了类型为复杂组件页面之后,我们可以点击直接去创建或者编辑组件页面按钮,这样就可以新建一个新的页面,并和这个弹窗关联起来。当删除这个弹窗时,对应的页面也会被删除,但您还可以在回收站中找到它。
 
在新创建的页面中,您可以想添加什么就添加什么。在本例中,我们添加了一个三栏结构的文本。再回到弹窗设置,我们会看到组件页面的id会被自动填上一个值。这个值就是对应页面的ID。请不要随便修改这个值。
 
此时再让我们点击一下弹窗的播放按钮,看看我们的弹窗中的内容发生了什么变化。您会发现,弹窗中的内容已经被替换成了对应页面中的内容。
 
 
想必聪明的你,现在已经明白,您可以像修改页面内容一样,修改弹窗中的内容。没错,就是这么简单直接,您可以在弹窗中使用表单,视频,幻灯片,和大部分您在页面中可以使用的内容。
 
 

如何设置弹窗的其他属性

 
在起飞页自助建站系统中,您可以方便地设置弹窗的头部和底部。您还可以隐藏头部,或者隐藏底部,或者两个都隐藏。
 
 
你还可以设置弹窗窗体的间距,就是内容和边框之间的空白的大小。以下是间距为40px的情况。
 
如果您需要修改弹窗的大小,可以切换回主要设置选项卡,然后往下拉。
 
您可以根据自己的实际需要,在宽度和高度中,输入数字或者百分比。起飞页也支持为同一个弹窗,定义手机端的大小。当然你也可以选择在手机上不显示弹窗。
 
同样在主要设置选项卡中,您还可以改变弹窗的位置。
通过选择弹窗位置九宫格中的对应区块,就可以让弹窗在对应的方位出现。
 
坦诚的讲,是个非常复杂的组件,我第一次使用,也学习了将近一个小时,才掌握了所有的参数。如果您的时间充裕,可以,可以尝试改变参数的值,然后观察效果。如果有任何问题,也可以联系我们的在线客服。我们将尽力为您解答。
 
 
相关教程:
 
 
 
 
 
 

1条评论,1人参与。

登录后即可发表评论,立即登录.

  热门教程