This Javascript (jQuery) plig-in lets a dialog be triggered based on some user behavior such as a timeout, by scrolling by some amount, or based on exit intent. This is useful if you want to pop-up something like a newsletter sign-up form in a more intelligent way instead of just doing it instantly. You can even chain events together, such as requiring the user to scroll down by some amount like 25% of the page, then back up by 10%, etc.

Modal #1 Demo



Modal #2 Demo



Modal #3 Demo



Modal #4 Demo



Modal #5 Demo



How does this works

  1. Include <script src="assets/js/vendor/popups.js"></script> in your HTML template after jQuery script init, and before </body> tag close.

  2. Include Bootstrap modal HTML in your template before </body> tag close.

    • Your Popup initialisation will be based on modal id=""
    • For example if your modal id
      <div class="modal fade" id="exampleModal" ... you need to include this id in your popup init script as
      function showPopupExit() { $('#exampleModal').modal('show'); };
  3. Include JavaScript code snippet as described below after all scripts init and before </body> tag close.

                    
                      <html>
                      <body>
                      ... your HTML template content ...

                      <script>
                      // see Bootstrap Modal Doc's https://getbootstrap.com/docs/4.0/components/modal/#via-javascript

                      // A trigger based on "exit intent" when the cursor is detected
                      //to go above the top of the browser window (useful in desktop scenarios)
                      function showPopupExit() {
                        $('#exampleModal').modal('show');
                      };

                      var dtExit = new DialogTrigger(showPopupExit, {
                        trigger: 'exitIntent' //current option
                      });


                      //---

                      // A trigger based on the user scrolling down to a target element on the page named '#mytarget'

                      function showPopupTarget() {
                        $('#exampleModal2').modal('show');
                      };

                      var dtElement = new DialogTrigger(showPopupTarget, {
                        trigger: 'target',
                        target: '#mytarget'
                      });


                      //---

                      // A trigger based on the user scrolling down at least 50% of the page

                      function showPopupScrollDown() {
                        $('#exampleModal3').modal('show');
                      };

                      var dtScrollDown = new DialogTrigger(showPopupScrollDown, {
                        trigger: 'scrollDown',
                        percentDown: 50
                      });

                      //---

                      // A trigger based on the user scrolling up at least 10% of the page

                      function showPopupScrollUp() {
                        $('#exampleModal4').modal('show');
                      };

                      var dtPercentUp = new DialogTrigger(showPopupScrollUp, {
                        trigger: 'scrollUp',
                        percentUp: 10
                      });


                      // A trigger based on a timeout of 5 seconds

                      function showPopupTimeout() {
                        $('#exampleModal5').modal('show');
                      };

                      var dtTimeout = new DialogTrigger(showPopupTimeout, {
                        trigger: 'timeout',
                        timeout: 5000
                      });

                      </script>
                      </body>
                      </html>