我的位置：首页 › 一站式数据分析平台-亿信ABI › 亿信ABI-心得体验 › ABI门户上广播通知设计方案（二） ...

ABI门户上广播通知设计方案（二）

复制链接 | 收藏本帖

2264

: jing 初学数据Lv2

发表于2020-6-28 16:29

楼主

本帖最后由 jing 于 2020-6-28 16:30 编辑

上次为大家介绍了两种广播通知的设计方案（见帖子《ABI门户上广播通知设计方案（一）》），这次迎来更为华丽的一种方案。

方案三：进入门户，弹出广告图文，5秒后自动消失

效果展示：

制作方法：

1）脚本位置：选中整个门户页面，打开“事件-自定义脚本”：

2）脚本内容：

//遮罩div
var coverDom = document.createElement("div");
coverDom.style.cssText += ";position:absolute;width:100%;height:100%;z-index:998;background-color:rgba(148,148,148,0.2);";
var path = EUI.getContextPath() + "vfs/dingzhi/弹框通知.gif";//上传到vfs图片的路径，自己修改
var ggbox = document.createElement("div");
ggbox.setAttribute("id","ggbox");
ggbox.style.backgroundImage = "url(" + path + ")";
ggbox.style.backgroundRepeat = "no-repeat";
ggbox.style.cssText += ";position:absolute;width:410px;height:406px;z-index:999;";
//关闭按钮
var button = document.createElement("div");
button.style.cssText += ";width:25px;height:25px;margin-left: 352px;margin-top:7px;";
ggbox.appendChild(button);
//内容dom
var wzdom = document.createElement("div");
wzdom.style.cssText += ";width:270px;height:220px;margin-top: 115px;margin-left: 70px;";
//文字内容，自己修改
wzdom.innerHTML = '欢迎大家访问亿信华辰的官网，点击即可跳转到该页面查看详情！';
ggbox.appendChild(wzdom);
var body = document.getElementsByTagName("body");
$(body).append(coverDom);
$(body).append(ggbox);
relocation();
//调整弹框位置
function relocation(){
var box = document.getElementById("ggbox");
if(!box) return;
//获取实际页面的left值。（页面宽度减去元素自身宽度/2）
var Left = (document.documentElement.clientWidth-410)/2;
//获取实际页面的top值。（页面宽度减去元素自身高度/2）
var topValue = (document.documentElement.clientHeight-406)/2;
box.style.left = Left+'px';
box.style.top = topValue+'px';
};