Delay a jquery plugin by seconds, scroll y or exit intent

Question

Every time I ask a question here, no matter how dumb it is, I do always learn something. Anyway, I'm hoping to get some more good answers to this one. I'm calling a jquery plugin for a modal on document.ready

<script>
    $(document).ready(function() {
      // Initialize the plugin
      $('#JPO').popup({
        absolute: false,
        autoopen: true
        
      });
      $.fn.popup.defaults.pagecontainer = '#page'
    });
  </script>

it auto opens a modal but I only want the modal to open after either a user scrolls down 400px, or after being on the page for 5 seconds, or on exit (exit intent).

This is the jquery plugin I'm using: https://dev.vast.com/jquery-popup-overlay/

Thanks so much in advance!

Does this answer your question? [How to wait 5 seconds with jQuery?](https://stackoverflow.com/questions/1836105/how-to-wait-5-seconds-with-jquery) — desbest, Dec 12 '20 at 23:10

score 2 · Answer 1 · answered Dec 08 '20 at 05:27

2

use setTimeout() function.

Read More about setTimeout

Sample Code:

setTimeout(
  function() 
  {
    //do something special
  }, 5000);

answered Dec 08 '20 at 05:27

Rajen Trivedi

1,225
2
5
10

that will work well for a timer. I need to find a way to read an exit intent by the user. – Ellouise Houbert Dec 08 '20 at 07:57
what exactly you want to achieve? plz elaborate more. – Rajen Trivedi Dec 08 '20 at 08:21
I want my pop up to appear when the user goes to close the tab, I also want it to appear after 5 seconds of being on the page. – Ellouise Houbert Dec 08 '20 at 09:08
which tab? please post HTML code to reproduce. – Rajen Trivedi Dec 08 '20 at 09:21

score 0 · Answer 2 · answered Dec 09 '20 at 05:09

I used a combination of setTimeout, and onmouseleave to create my popup.

 <script>      
      function openPopup(){
        $('#JPO').popup({
      autoopen: true,
          detatch: true,
          transition: 'all 1.0s'
    });      
      };
      
      function exitPopup(){
            $('#JPO').popup('show');
            };
       
       function cookiePopup(){
         $('#JPO').popup({
           autoopen: false,
           detatch: true,
           transition: 'all 1.0s'
         });
       };
     
$(document).ready(function(){
  $('.modal-content').hide();
  
  var dialogShown = Cookies.get('dialogShown');
  if (!dialogShown) {
        
        setTimeout(openPopup, {{ section.settings.delay }});
        $(document).mouseleave(function(){
          setTimeout(exitPopup,1050)
        });
    Cookies.set('dialogShown', 1, { expires: 1 });
  }
  else {
    setTimeout(cookiePopup, {{ section.settings.delay }});
  }
});
</script>

I also used a plugin called js-cookie to make my pop-up less annoying to repeat visitors. PS. this is for a shopify section, so it does contain some liquid.

Plugins used:

Delay a jquery plugin by seconds, scroll y or exit intent

2 Answers2