Benas Lengvinas Benas Lengvinas - 1 year ago 86
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.. appreciate the help. I've tried doing

$('#id').click(function() {
document.getElementById("cover").style.zIndex = 1;

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

Tyr Tyr
Answer Source

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

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

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download