Dismiss pop-up on bottom of the page?

[JeroenPuper]

So I want to add a pop-up to my website asking the visitor to subscribe to our mailing. At the bottom of the page there is a form to submit your email to enter aswell.  Two forms with the same goal seems a bit much.

So my question is: can we trigger a dismiss option for the popup when you reach the bottom of the page. Or do you guys have any good suggestions. 

We are pretty keen on keeping the form on the bottom of the page, so just deleting that isn't an option.

Ideas?

Thanks in advance!

[piersg · Accepted solution]

Thanks for the tag @sharonlicari.

Hi @JeroenPuper, if you want to hide a popup when the user scrolls near the bottom of the page, you can use this code (also re-shows the popup when the user scrolls back up). Our HS popup has ids that start with "leadinModal" so this should work for all HS popups, but you can change the id/class if you need to:

//scroll event
window.onscroll = function(e) {
  // if the user scrolls near the bottom of the page (bottom of the page minus the height the of window)
  if ((window.innerHeight + window.scrollY) >= (document.body.offsetHeight - window.innerHeight)) {
    // display none on the popup. change id/class if appropriate to ('#[id name]') or ('.[class name')
    $('*[id^="leadinModal"]').css('display','none');
  } else {
    // re show the popup when the user scrolls back up
    $('*[id^="leadinModal"]').css('display','block');
  }
};

Here is a vanilla JS (no jQuery) way of doing the above:

// declare styles to be added/removed
var styles = `
    *[id^="leadinModal"] {
        display: none;
    }
`
// create the stylesheet and add above styles to it
var styleSheet = document.createElement("style")
styleSheet.type = "text/css"
styleSheet.innerText = styles

// if the user scrolls near the bottom of the page (bottom of the page minus the height the of window)
window.onscroll = function(e) {
  if ((window.innerHeight + window.scrollY) >= (document.body.offsetHeight - window.innerHeight)) {
    // add stylesheet
    document.head.appendChild(styleSheet)
  } else {
    // else remove stylesheet
    document.head.removeChild(styleSheet)
  }
};

Edit: If you want the popup to disappear at the very bottom of the page, instead of near the bottom change

((window.innerHeight + window.scrollY) >= (document.body.offsetHeight - window.innerHeight))

to

((window.innerHeight + window.scrollY) >= document.body.offsetHeight)

[piersg · Accepted solution]

Thanks for the tag @sharonlicari.

Hi @JeroenPuper, if you want to hide a popup when the user scrolls near the bottom of the page, you can use this code (also re-shows the popup when the user scrolls back up). Our HS popup has ids that start with "leadinModal" so this should work for all HS popups, but you can change the id/class if you need to:

//scroll event
window.onscroll = function(e) {
  // if the user scrolls near the bottom of the page (bottom of the page minus the height the of window)
  if ((window.innerHeight + window.scrollY) >= (document.body.offsetHeight - window.innerHeight)) {
    // display none on the popup. change id/class if appropriate to ('#[id name]') or ('.[class name')
    $('*[id^="leadinModal"]').css('display','none');
  } else {
    // re show the popup when the user scrolls back up
    $('*[id^="leadinModal"]').css('display','block');
  }
};

Here is a vanilla JS (no jQuery) way of doing the above:

// declare styles to be added/removed
var styles = `
    *[id^="leadinModal"] {
        display: none;
    }
`
// create the stylesheet and add above styles to it
var styleSheet = document.createElement("style")
styleSheet.type = "text/css"
styleSheet.innerText = styles

// if the user scrolls near the bottom of the page (bottom of the page minus the height the of window)
window.onscroll = function(e) {
  if ((window.innerHeight + window.scrollY) >= (document.body.offsetHeight - window.innerHeight)) {
    // add stylesheet
    document.head.appendChild(styleSheet)
  } else {
    // else remove stylesheet
    document.head.removeChild(styleSheet)
  }
};

Edit: If you want the popup to disappear at the very bottom of the page, instead of near the bottom change

((window.innerHeight + window.scrollY) >= (document.body.offsetHeight - window.innerHeight))

to

((window.innerHeight + window.scrollY) >= document.body.offsetHeight)

[JeroenPuper]

Sorry for the late respons, but how do I implement this? If I simply copy the code into the CMS (magento) the pop-up doesn't show up anymore. How can I add this code to the pop-up directly? Or am I doing something wrong?

[piersg · Accepted solution]

I'm not familiar with Magento, but they have some documentation on it here.

The first method in this forum message seems useful and fairly straightforward too.

[sharonlicari]

Hey @JeroenPuper      

Thank you for the information provided. I'll tag a few experts to see if they can share some examples.  

Hey @Krystina @piersg @Mike_Eastwood  could you please share your thoughts with @JeroenPuper?         

Thank you  & Happy Friday

Sharon