Banner disappears when modal opens

  banner, html, javascript, modal-dialog

I am building a website and I started with a cookies banner. Afterwards I wanted to add a modal box for cookies policies, and I am using for it this template.
The problem is that when I click on the button of the modal box, part of the banner disappears.

<div class="cookie-consent-banner">
<div class="cookie-consent-banner__inner">
<div class="cookie-consent-banner__copy">
  <div class="cookie-consent-banner__header">THIS WEBSITE USES COOKIES</div>
  <div class="cookie-consent-banner__description"> For more info visit our <button class="mynewbutton" id="myBtn">cookies policy</button></div>

</div>

<div class="cookie-consent-banner__actions">
  <!--<a href="#" class="cookie-consent-banner__cta">
    OK
  </a>-->
  <button id="i" class="cookie-consent-banner__cta">
    OK
  </button>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script>
  $(document).ready(function(){

    if (window.localStorage.getItem('accept_cookies')) {
      $("button").parent().parent().closest('div').hide(); 

    }
  $("button").click(function() {
    window.localStorage.setItem('accept_cookies', true);
    $(this).parent().parent().closest('div').hide();

  });

  });
  </script>

  <a href="www.google.com" class="cookie-consent-banner__cta cookie-consent-banner__cta--secondary">
    Decline
  </a>

</div>

</div>

<!-- The Modal -->
<div id="myModal" class="modal">

<!-- Modal content -->
<div class="modal-content">
<span class="close">&times;</span>
<p>Some text in the Modal..</p>
</div>

</div> 
</div>
<script>
// Get the modal
var modal = document.getElementById("myModal");

// Get the button that opens the modal
var btn = document.getElementById("myBtn");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks the button, open the modal
 btn.onclick = function() {
 modal.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}

 // When the user clicks anywhere outside of the modal, close it
 window.onclick = function(event) {
 if (event.target == modal) {
   modal.style.display = "none";
 }
 }
 </script>

How can I solve this problem? Thanks

Source: Ask Javascript Questions

LEAVE A COMMENT