Streaming live at 10am (PST)

The popup when exiting a site help


#1

How to add custom code to show the popup when exiting a site?Thanks


#2
$(document).on('click', 'a', function() {
  if(this.href.indexOf('http') == 0 && this.href.indexOf(location.hostname) == -1) {
    return confirm('Are you sure you want to leave this site?');
  }
});

#3

Thanks @samliew

I want to create popup with form that can collect email, Like this one www.ogadget.com/x/jelly, when try to exit page, it show,

Can you show me an simple demo?

Thank you very much:laughing:


#5

Hey @Anderson_Min
I’ve tried something a bit like what you are searching for. It might not be perfect but a first step towards a nice solution, easy to use with webflow :slight_smile: If anyone wants to chip in with improvement ideas :wink:

You need to create your modal / popup in webflow (popup background / popup div / popup closing element) with its closing interaction in webflow. You then display none your popup in webflow designer.
And then you can add a script similar to this one to your page’s custom code :

<script>
document.addEventListener("mouseleave", function(e){
    if( e.clientY < 0 )
    {
         $('#exit-popup').css("display", "flex");
         $('#exit-popup').fadeIn();
    }
}, false);

    $('#exit-popup-cross').click(function () { 
      setTimeout(function(){
        $('#exit-popup').remove();   
      }, 5000);
    });
</script>

It basically says if the mouse of user leaves the browser viewport in a vertical direction, you should display flex the popup and fade it in. Then you add a part that says when a user clicks the closing element, remove the popup from the DOM after a number of ms.

Hope this helps.