Jquery and making a cover div go above all content

Question

so i've been struggling with jquery and making a div that's suppose to cover the page on click. I know how to cover the whole page with a div on top (higher z-index, a bit of opacity and vuala), i have a button, but how to I make it work when clicked.. https://jsfiddle.net/4uu8Lkdt/8/ appreciate the help. I've tried doing

$('#id').click(function() {

  $('#id').toggleClass('cover');

  document.getElementById("cover").style.zIndex = 1;

});

but it didn't work.. I'm new at this website development and javascript stuff.

Answer 1

Here is a small edit for your code including jQuery (question is tagged for it):

https://jsfiddle.net/4uu8Lkdt/9/

if (this.classList.contains("is-active") === true) {
    $('body').append($('<div class="cover">'));
} else {
    $('.cover').remove();
}

New CSS class for cover:

.cover {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 11;
  opacity: 0.5;
  background-color: white;
}

I would recommend changing the code to jQuery equivalents. It's much easier for developing.

Jquery and making a cover div go above all content

Sign up