综合案例2-制作简单轻巧的弹出框

很多时候,我们会用到简单轻巧的弹出框,弹出框显示位置固定,不占空间,漂亮的弹出框还可以为网站增添几分色彩。

 

 

首先,还是先布局框架,一个段落,一个布局行,布局行中放一个自定义列宽为10:2的一行两列,左边放段落,右边放差号图标。一行两列的布局行下方再放一个留言表单插件。如图示填充好内容,简单调整下样式。

接着,选中外层布局行,


设置右侧边栏样式-显示状态:隐藏;


设置右侧边栏样式-定位:滚动漂浮,位置:上贴吧左右充满,上距离:30%,左距离:0,右距离:0,层级:5。

 

 

再在右侧边栏-属性-ID复制好元素ID,如果用到多个ID,最好记录到记事本,方便添加交互事件。

 

 

然后,选中段落,在右侧边栏交互-鼠标单击添加事件:“显示”外层布局行的元素ID。


选中差号,在右侧边栏交互-鼠标单击添加事件:“隐藏”外层布局行的元素ID。至此,一个弹出框就基本完成了。

 

 

上一篇
下一篇

免费使用响站

提供永久免费的系统、二级域名和空间