CSS杀死HTML和JavaScript-为什么？

时间：2019-04-26 11:04:07

标签： javascript jquery html css html5

我正在为我的网站进行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
}

#Accept {
  background-color: #000000;
  border: 2px solid #000000;
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .2);
  box-sizing: border-box;
  color: #ffffff;
  cursor: pointer!important;
  font-family: Arial, sans-serif;
  font-size: 14px;
  font-weight: 600;
  height: 55px!important;
  letter-spacing: 2px;
  line-height: 34px;
  margin: 0 0 15px;
  padding: 0 13px;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  transition: all .2s ease-in-out;
  white-space: nowrap;
  -webkit-font-smoothing: antialiased
}

#Accept:hover {
  background-color: #ffffff;
  color: #000000;
}

.buttons #Accept {
  min-width: 315px!important
}

.link {
  color: #000000;
  cursor: pointer;
  text-align: center;
  text-decoration: underline;
  font-size: 14px;
  line-height: 21px;
  margin: 0 15px
}

.link:hover {
  opacity: .6
}

.link {
  margin: 0
}

.link+.link {
  padding-left: 20px;
  margin-left: 20px;
  border-left: 1px solid #ffffff
}

@media screen and (max-width:850px) {
  .agj-content {
    flex-wrap: wrap
  }
  .initial-info {
    width: 100%
  }
  .buttons {
    width: 100%;
    padding: 60px 0 0
  }
  .buttons #Accept {
    width: 100%
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<div id="CookieBanner">
  <div class="agj">
    <div class="agj-content">
      <div class="initial-info">
        <h2 class="title">Privacy</h2>
        <p class="message">This website uses cookies to provide you with the best possible service and website functionality, and to provide social media features and analyse the traffic to our website. If you continue to use our website, you agree to our using cookies.</p>
      </div>
      <div class="buttons">
        <button id="Accept">Accept</button>
        <a class="link" href="#" title="Get more Information about Cookies and how we use them">Show Purposes</a>
      </div>
    </div>
  </div>
</div>

</head>

<body>
  <h1>Test WEbsite</h1>
  <p>asdfdslfhsdlhafasldhflaskdfhklsdjf kldsjfklasdj fds fjaskldfjjsdfasdfasdfasdfsd <br> asdfjsadlkfjdskfjksdjfklsdjfksdjfl sdjfajds</p>
  <p>asdfdslfhsdlhafasldhflaskdfhklsdjf kldsjfklasdj fds fjaskldfjjsdfasdfasdfasdfsd <br> asdfjsadlkfjdskfjksdjfklsdjfksdjfl sdjfajds</p>
  <p>asdfdslfhsdlhafasldhflaskdfhklsdjf kldsjfklasdj fds fjaskldfjjsdfasdfasdfasdfsd <br> asdfjsadlkfjdskfjksdjfklsdjfksdjfl sdjfajds</p>
  <p>asdfdslfhsdlhafasldhflaskdfhklsdjf kldsjfklasdj fds fjaskldfjjsdfasdfasdfasdfsd <br> asdfjsadlkfjdskfjksdjfklsdjfksdjfl sdjfajds</p>
  <p>asdfdslfhsdlhafasldhflaskdfhklsdjf kldsjfklasdj fds fjaskldfjjsdfasdfasdfasdfsd <br> asdfjsadlkfjdskfjksdjfklsdjfksdjfl sdjfajds</p>
  <p>asdfdslfhsdlhafasldhflaskdfhklsdjf kldsjfklasdj fds fjaskldfjjsdfasdfasdfasdfsd <br> asdfjsadlkfjdskfjksdjfklsdjfksdjfl sdjfajds</p>
  <p>asdfdslfhsdlhafasldhflaskdfhklsdjf kldsjfklasdj fds fjaskldfjjsdfasdfasdfasdfsd <br> asdfjsadlkfjdskfjksdjfklsdjfksdjfl sdjfajds</p>
  <p>asdfdslfhsdlhafasldhflaskdfhklsdjf kldsjfklasdj fds fjaskldfjjsdfasdfasdfasdfsd <br> asdfjsadlkfjdskfjksdjfklsdjfksdjfl sdjfajds</p>
  <p>asdfdslfhsdlhafasldhflaskdfhklsdjf kldsjfklasdj fds fjaskldfjjsdfasdfasdfasdfsd <br> asdfjsadlkfjdskfjksdjfklsdjfksdjfl sdjfajds</p>
  <p>asdfdslfhsdlhafasldhflaskdfhklsdjf kldsjfklasdj fds fjaskldfjjsdfasdfasdfasdfsd <br> asdfjsadlkfjdskfjksdjfklsdjfksdjfl sdjfajds</p>
  <p>asdfdslfhsdlhafasldhflaskdfhklsdjf kldsjfklasdj fds fjaskldfjjsdfasdfasdfasdfsd <br> asdfjsadlkfjdskfjksdjfklsdjfksdjfl sdjfajds</p>
  <br><br><br><br><br><br><br><br>

  <p>asdfdslfhsdlhafasldhflaskdfhklsdjf kldsjfklasdj fds fjaskldfjjsdfasdfasdfasdfsd <br> asdfjsadlkfjdskfjksdjfklsdjfksdjfl sdjfajds</p>
</body>

</html>

2 个答案:

答案 0 :(得分：1)

CookieBanner块应位于正文中，而不应位于头部。 另外，您应该在块中将不透明度更改为另一个不同于0的值：

.agj,#CookieBanner{
    opacity: 0; // change this to 1 or remove it
    ...
}

这应该可以解决问题。

答案 1 :(得分：0)

由于在CSS的开头将不透明度设置为0（并且html中存在错误，因此代码在代码中的横幅之后开始标记！将其向上移动！），因此cookie不会在开始时显示。您需要在开始时显示横幅，然后，如果用户接受，则将其隐藏（但是将CSS设置为可见，以使其开始显示）。

在代码段中显示了cookie横幅，但是单击接受时出现错误。该错误发生在此处[摘录中]，因为它无法读取窗口“接受cookie”的属性。 “该文档已被沙盒化，并且缺少'allow-same-origin'（允许相同来源）标记。”最初的“脚本错误”发生在您的JavaScript的第一部分。 More about getting/setting cookies

希望这会有所帮助

$(document).ready(function() {
 /* $('#CookieBanner').show();*/
  $("#Accept").click(function() {
    window.localStorage.setItem('accept_cookies', true);
    $('#CookieBanner').css({"opacity": "0", "visibility": "hidden"});
  });
});
#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: .8;
  visibility:visible;
  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;
}

#Accept {
  background-color: #000000;
  border: 2px solid #000000;
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .2);
  box-sizing: border-box;
  color: #ffffff;
  cursor: pointer!important;
  font-family: Arial, sans-serif;
  font-size: 14px;
  font-weight: 600;
  height: 55px!important;
  letter-spacing: 2px;
  line-height: 34px;
  margin: 0 0 15px;
  padding: 0 13px;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  transition: all .2s ease-in-out;
  white-space: nowrap;
  /*-webkit-font-smoothing: antialiased*/
}

#Accept:hover {
  background-color: #ffffff;
  color: #000000;
}

.buttons #Accept {
  min-width: 315px!important;
}

.link {
  color: #000000;
  cursor: pointer;
  text-align: center;
  text-decoration: underline;
  font-size: 14px;
  line-height: 21px;
  margin: 0 15px;
}

.link:hover {
  opacity: .6
}

.link {
  margin: 0;
}

.link+.link {
  padding-left: 20px;
  margin-left: 20px;
  border-left: 1px solid #ffffff
}

@media screen and (max-width:850px) {
  .agj-content {
    flex-wrap: wrap
  }
  .initial-info {
    width: 100%
  }
  .buttons {
    width: 100%;
    padding: 60px 0 0
  }
  .buttons #Accept {
    width: 100%
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body>

  <h1>Test Website</h1>
  
  <div id="CookieBanner">
  <div class="agj">
    <div class="agj-content">
      <div class="initial-info">
        <h2 class="title">Privacy</h2>
        <p class="message">This website uses cookies to provide you with the best possible service and website functionality, and to provide social media features and analyse the traffic to our website. If you continue to use our website, you agree to our using cookies.</p>
      </div>
      <div class="buttons">
        <button id="Accept">Accept</button>
        <a class="link" href="#" title="Get more Information about Cookies and how we use them">Show Purposes</a>
      </div>
    </div>
  </div>
</div>

  <p>asdfdslfhsdlhafasldhflaskdfhklsdjf kldsjfklasdj fds fjaskldfjjsdfasdfasdfasdfsd <br> asdfjsadlkfjdskfjksdjfklsdjfksdjfl sdjfajds</p>
  <p>asdfdslfhsdlhafasldhflaskdfhklsdjf kldsjfklasdj fds fjaskldfjjsdfasdfasdfasdfsd <br> asdfjsadlkfjdskfjksdjfklsdjfksdjfl sdjfajds</p>
  <p>asdfdslfhsdlhafasldhflaskdfhklsdjf kldsjfklasdj fds fjaskldfjjsdfasdfasdfasdfsd <br> asdfjsadlkfjdskfjksdjfklsdjfksdjfl sdjfajds</p>
  <p>asdfdslfhsdlhafasldhflaskdfhklsdjf kldsjfklasdj fds fjaskldfjjsdfasdfasdfasdfsd <br> asdfjsadlkfjdskfjksdjfklsdjfksdjfl sdjfajds</p>
  <p>asdfdslfhsdlhafasldhflaskdfhklsdjf kldsjfklasdj fds fjaskldfjjsdfasdfasdfasdfsd <br> asdfjsadlkfjdskfjksdjfklsdjfksdjfl sdjfajds</p>
  <p>asdfdslfhsdlhafasldhflaskdfhklsdjf kldsjfklasdj fds fjaskldfjjsdfasdfasdfasdfsd <br> asdfjsadlkfjdskfjksdjfklsdjfksdjfl sdjfajds</p>
  <p>asdfdslfhsdlhafasldhflaskdfhklsdjf kldsjfklasdj fds fjaskldfjjsdfasdfasdfasdfsd <br> asdfjsadlkfjdskfjksdjfklsdjfksdjfl sdjfajds</p>
  <p>asdfdslfhsdlhafasldhflaskdfhklsdjf kldsjfklasdj fds fjaskldfjjsdfasdfasdfasdfsd <br> asdfjsadlkfjdskfjksdjfklsdjfksdjfl sdjfajds</p>
  <p>asdfdslfhsdlhafasldhflaskdfhklsdjf kldsjfklasdj fds fjaskldfjjsdfasdfasdfasdfsd <br> asdfjsadlkfjdskfjksdjfklsdjfksdjfl sdjfajds</p>
  <p>asdfdslfhsdlhafasldhflaskdfhklsdjf kldsjfklasdj fds fjaskldfjjsdfasdfasdfasdfsd <br> asdfjsadlkfjdskfjksdjfklsdjfksdjfl sdjfajds</p>
  <p>asdfdslfhsdlhafasldhflaskdfhklsdjf kldsjfklasdj fds fjaskldfjjsdfasdfasdfasdfsd <br> asdfjsadlkfjdskfjksdjfklsdjfksdjfl sdjfajds</p>
  <br>

  <p>asdfdslfhsdlhafasldhflaskdfhklsdjf kldsjfklasdj fds fjaskldfjjsdfasdfasdfasdfsd <br> asdfjsadlkfjdskfjksdjfklsdjfksdjfl sdjfajds</p>
</body>

相关问题
最新问题