CSS杀死HTML和JavaScript-为什么？

Question

我正在为我的网站进行Cookie横幅项目，我得到了我需要的一切（HTML，CSS，JavaScript，JQuery），并且我想我在Css中确实有问题，因为其他所有工作都可以。

想法是：第一次用户访问网站->看到他必须接受的CookieBanner->单击“接受”按钮后，信息将通过LocalStorage保存，并且横幅消失，并且他再也看不到它（即使他转到我的下一页或重新加载它）

在CSS行的某个地方，我遇到了问题。如果有人有想法或看到问题，那就太好了；）

这是我的代码：

$(document).ready(function() {

  if (window.localStorage.getItem('accept_cookies')) {

    $('#CookieBanner').hide();

  }

  $("#Accept").click(function() {

    window.localStorage.setItem('accept_cookies', true);

    $('#CookieBanner').hide();

  });

});

#CookieBanner {

  background: rgba(0, 0, 0, .5) !important;

  bottom: 0!important;

  left: 0!important;

  position: fixed!important;

  right: 0!important;

  top: 0!important;

  transition: opacity .15s ease;

  z-index: 2147483647!important;

}

.agj,

#CookieBanner {

  opacity: 0;

  overflow-y: scroll;

  will-change: visibility, opacity

}

.agj {

  background-color: #ffffff;

  bottom: 0;

  box-sizing: border-box;

  color: #000000;

  font-family: Arial, Verdana, sans-serif;

  justify-content: space-between;

  left: 0;

  max-height: 100vh;

  min-height: 300px!important;

  overflow-x: hidden;

  position: fixed;

  right: 0;

  -webkit-font-smoothing: antialiased

}

.agj-content {

  display: flex;

  padding: 60px;

  overflow-y: scroll

}

.title {

  color: #000000;

  font-size: 34px;

  font-weight: 700;

  line-height: 41px;

  margin: 0 0 24px

}

.message {

  font-size: 14px;

  font-weight: 400;

  line-height: 21px;

  margin: 0;

  -webkit-font-smoothing: antialiased

}

.buttons {

  display: flex!important;

  align-content: center;

  flex-direction: column;

  justify-content: center;

  padding-left: 60px

}

Answer 1

CookieBanner块应位于正文中，而不应位于头部。另外，您应该在块中将不透明度更改为另一个不同于0的值：.agj,#CookieBanner{    opacity: 0; // change this to 1 or remove it    ...}