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;
});
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.