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.

                      ... your HTML template content ...

                      // see Bootstrap Modal Doc's

                      // 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() {

                      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() {

                      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() {

                      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() {

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

                      // A trigger based on a timeout of 5 seconds

                      function showPopupTimeout() {

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