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>