This project shows a popup:
- When mouse leaves the screen (only working on desktop)
- or after scrolling 50% of page height
- or after 10 seconds

It uses pure Javascript (no jQuery).

To make it work on your project:
‍
1. Copy the popup__wrapper element to your project.
‍
2. Set it to display:flex and style it as you want

Note: Only requirement is to keep these 3 elements: popup__wrapper, popup__close-btn, popup__js-code. They are required for the Javascript to work
‍
3. Set it back to display:none
‍
4. Create a symbol and add it on all the pages you want (or in your footer)

Note: No code is required to be added on site or page settings, all the code is embedded in the Webflow elements

You can edit the Javascript code in the popup__js-code embed element to change the popup behavior:

- To change the number of days before showing the popup again after it is closed ; change the number 1 in this code line:

Cookies.set('popup-wf', 'value', { expires: 1 })
‍
- To change the percentage of screen scrolled before it shows the popup ; change the number 50 in the below code line:

if(getScrollPercent()>50)
‍
- To change the number of milliseconds before showing the popup ; change the number 10000 in the below code line:

setTimeout("showWfPopup()", 10000);

- To change the number of days before showing the popup again after a successful form submission, change the number 500 in the below code line:

Cookies.set('popup-wf', 'value', { expires: 500 });

If your popup contains a newsletter subscription form for example, you might want to not show the popup again after a successful form submission.

To do this:

1. Add id 'popup_success' to the Success Message element of your form in the Webflow element settings
2. Uncomment the below Javascript code in the popup__js-code embed element:

// Add event to not show the popup again if the form is submitted successfully
popup_wf_sucess = document.getElementById('popup_success');
if(popup_wf_sucess != null)
{
         var observer = new MutationObserver(function(mutations) {
             mutations.forEach(function(mutationRecord) {
              if (mutationRecord.type === 'attributes'){
                  var style_attr = popup_wf_sucess.getAttribute("style");
                      if(style_attr != null && style_attr.replace(/\s+/g, '').includes('display:block')){
                    // Creates cookie expiring 500 days later
Cookies.set('popup-wf', 'value', { expires: 500 });
                     }                   }              });              });
         observer.observe(popup_wf_sucess, { attributes : true, attributeFilter : ['style'] });
}
‍

Using the js-cookie open-source library
Created by Julien Vanwinsberghe from SOYOO (Webflow web agency based in Reunion island)