Benas Lengvinas Benas Lengvinas - 6 months ago 18
HTML Question

Jquery and making a cover div go above all content

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.

Tyr Tyr
Answer

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.

Comments