modal visiblity

by Alen Subasic

HTML

<div id="login" hidden>
  <h1>
    test
  </h1>
  <p>
    This is a test
  </p>
</div>

<button onclick="show()">
  Show Modal
</button>

<button onclick="hide()">
  Hide Modal
</button>

JavaScript

const loginModal = document.getElementById('login')

function show() {
  loginModal.hidden = false;
}

function hide() {
  loginModal.hidden = true;
}

function visibilityChange(element, callback) {
  var options = {
    root: document.documentElement,
  };

  var observer = new IntersectionObserver((entries, observer) => {
    entries.forEach((entry) => {
      callback(entry.intersectionRatio > 0);
    });
  }, options);

  observer.observe(element);
}

visibilityChange(loginModal, visible => {
  if (visible) {
    alert('modal is visible')
  } else {
    alert('modal is hidden')
  }
})