Custome JS code on specific pages

Design help Custom code
1

Hello there,
I’m trying to show a pop-up modal on some specific pages.
The JS code gets the id of the modal and shows it after the user has scrolled some % in the page.

Issue: A modal popup section is present in every page, but it’s only shown on the pages with a lead magnet, which is shown after the user clicks on some button.
When I insert the JS code to show the popup, the modal is shown on every page, whether it has a lead magnet or not.

Note: I have used conditional visibility to pages with lead magnets, but the issue remains.

In the mean time, I have deleted the JS code, so I can not share the link to the page, but here is the code for it:

<!-- scroll -->
<script>
document.addEventListener("DOMContentLoaded", function() {
  var popuplm = document.getElementById("popuplm");
  var windowHeight = window.innerHeight;
  var scrollTrigger = windowHeight * 3.7; // 10% of the window height

  function handleScroll() {
    if (window.pageYOffset >= scrollTrigger) {
      // Display the popup div
      popuplm.style.display = "block";

      // Remove the scroll event listener once the popup is shown
      window.removeEventListener("scroll", handleScroll);
    }
  }

  // Attach the scroll event listener
  window.addEventListener("scroll", handleScroll);
});

</script>
2

Conditional visibility hides elements but does not remove them from the DOM, so your JS popup is still there. You could write some JS to remove those hidden elements. It should run ok before the user scroll down to that section, in most cases.

A better option is probably to add some intelligence to your trigger script so that it just won’t display the popup if its conditionally hidden ( check the classes, you’ll see what you’re looking for ).

1 Like