我正在为我的网站开发一个 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>最佳答案
CookieBanner block 应该在正文中，而不是在标题部分。 此外，您应该将不透明度更改为不同于 block 中 0 的另一个值:
.agj,#CookieBanner{
opacity: 0; // change this to 1 or remove it
...
}
这应该可以解决问题。
关于javascript - CSS 杀死 HTML 和 JavaScript - 为什么？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55866256/