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

    ...

}