如何给网站添加头部可关闭的横幅广告(像justnews一样)

首先在body标签上面添加横幅的html代码,通过设置top banner的display:none 来实现 一开始网站加载时候隐藏横幅:

<div id="top-banner" style="display:none ;">
  <a href="#"><img src="/path/to/banner.png" alt="" style="width:100%;"></a>
  
  <button id="close-button"></button>
</div>

然后在css文件里面,添加横幅的css,来实现横幅和关闭符号的位置对应:

#top-banner {
    position: fixed;
    top: 0;
    max-width: 1230px;
    width:80%;
    left: 50%;
    transform: translateX(-50%);
    background-color: #f1f1f1;
    text-align: center;
    
    z-index: 999;
}

.admin-bar #top-banner {
   top: 32px;
}

#close-button {
    position: absolute;
    top: 10px;
    right: 10px;
}

#close-button::before {
    content: "";
    background-image: url(../images/close.svg);
    background-repeat: no-repeat;
    background-size: contain;
    width: 1em;
    height: 1em;
    display: inline-block;
    margin-right: 0.5em;
}

上面css设置了横幅在浏览器的最上方固定,设置了最大宽度为1230, 宽度为80%, 使用left50%加上transform:translatex 方法来实现居中,加上z-index:999 来实现覆盖到最顶层。通过设置top banner为position:relative 和设置close button 为position absolut 来实现关闭的icon位于图片的右上角。(设置图片的宽度为100%)。通过设置::before属性来实现图片添加icon。

接下来通过javascript来实现网站加载时候更改top banner的style为display:block,

document.getElementById("top-banner").style.display = "block";

然后通过点击关闭按钮,来实现style变为display:none.

document.getElementById(“close-button”).addEventListener(“click”, function () {

    document.getElementById(“top-banner”).style.display = “none”;

   

  });

当然,你还可以设置添加cookie等方式,来实现用户关闭一次后,多久时间内不再重复出现广告。

Check Also

获取input的keyup或者input状态只获取一次值避免无限重复值

$(document).rea …

发表回复

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