Cookie bar not closing?

Question

I would like to know if anyone can help me with my cookie bar.

It's a simple bar fixed at the bottom of the screen with a cross button.

Unfortunately, I think something is wrong or missing.

When I click the close button, nothing happens.

Maybe I am missing something in the javascript code.

Can you help me?

Thank you very much

$(".close").click(function() {
  $(".cookie-banner").fadeOut();
});

.CNOcookies {
  padding: 10px 0;
  position: fixed;
  bottom: 0;
  background-color: #ffffff;
  text-align: center;
  z-index: 99999;
  width: 100%;
  max-width: 100%!important;
  display: block;
  margin: 0;
  -webkit-box-shadow: 0px -2px 4px 0px rgb(0 0 0 / 10%);
}

.CNOctxt {
  margin-left: 8.33333333%;
  width: 83.33333333%;
  float: left;
  position: relative;
  min-height: 1px;
}

.CNOcbutton {
  width: 8.33333333%;
  float: left;
  position: relative;
  min-height: 1px;
}

button.close {
  padding: 0;
  cursor: pointer;
  border: 0;
  -webkit-appearance: none;
}

.close {
  font-size: 21px;
  font-weight: 700;
  line-height: 1;
  color: #000;
  text-shadow: 0 1px 0 #fff;
  opacity: .5;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
  opacity: 1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="CNOcookies">
  <div class="CNOctxt">
    <span>Website uses cookies to improve the navigation of its users. By continuing your navigation, you accept our cookie policy. <a href="https://google.com" target="_blank" style="text-decoration: underline;">More info</a></span>
  </div>
  <div class="CNOcbutton">
    <button type="button" class="close" data-dismiss="alert" aria-hidden="true" style="background-color: white !important;">
      ×
    </button>
  </div>
</div>

It looks like this at the moment.

Reference Image

In your html code, I don't see any element having `cookie-banner` class. Also your css doesn't define this class. — B001ᛦ, Sep 06 '21 at 15:18
@B001ᛦ , I added a print, how it looks like at the moment, but the problem is, that does not disappear when I hit the close button. — Captain Nobvious, Sep 06 '21 at 15:30

aaandri98 · Accepted Answer · 2021-09-06T15:55:21.717

you should replace

$(".cookie-banner").fadeOut();

with

$(".CNOcookies").fadeOut();

EDIT:

I tried the script and it's working, did you delete the cache from your browser and imported correctly jQuery?

$(".close").click(function() {
  $(".CNOcookies").fadeOut();
})

.CNOcookies {
  padding: 10px 0;
  position: fixed;
  bottom: 0;
  background-color: #ffffff;
  text-align: center;
  z-index: 99999;
  width: 100%;
  max-width: 100%!important;
  display: block;
  margin: 0;
  -webkit-box-shadow: 0px -2px 4px 0px rgb(0 0 0 / 10%);
}

.CNOctxt {
  margin-left: 8.33333333%;
  width: 83.33333333%;
  float: left;
  position: relative;
  min-height: 1px;
}

.CNOcbutton {
  width: 8.33333333%;
  float: left;
  position: relative;
  min-height: 1px;
}

button.close {
  padding: 0;
  cursor: pointer;
  border: 0;
  -webkit-appearance: none;
}

.close {
  font-size: 21px;
  font-weight: 700;
  line-height: 1;
  color: #000;
  text-shadow: 0 1px 0 #fff;
  opacity: .5;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
  opacity: 1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<div class="CNOcookies">
  <div class="CNOctxt">
    <span>Website uses cookies to improve the navigation of its users. By continuing your navigation, you accept our cookie policy. <a href="https://google.com" target="_blank" style="text-decoration: underline;">More info</a></span>
  </div>
  <div class="CNOcbutton">
    <button type="button" class="close" data-dismiss="alert" aria-hidden="true" style="background-color: white !important;">
      ×
    </button>
  </div>
</div>
</html>

One more question, what do I need to add to this code, so when someone closes the bar, it won't show again. Thank you again :) — Captain Nobvious, Sep 06 '21 at 16:00
you should create a [cookie](https://stackoverflow.com/questions/4825683/how-do-i-create-and-read-a-value-from-cookie) to save in your browser whether the user already closed the bar in a time span. — aaandri98, Sep 06 '21 at 16:16

Cookie bar not closing?

1 Answers1