JavaScripting

The definitive source of the best
JavaScript libraries, frameworks, and plugins.


  • ×

    Exit popup easely. Detects if the mouse of a user leaves the viewport borders of your website
    Filed under  › 

    • 🔾25%Overall
    • 433
    • 15.9 days
    • 🕩33
    • 👥1

    glio

    Detects if the mouse of an user leaves the viewport / document borders of your website and when this happens, trigger your callback. Portuguese documentation.

    Demo.

    Chrome logo Firefox logo Internet Explorer logo Opera logo Safari logo
    17+ ✔ 14+ ✔ 9+ ✔ 17+ ✔ 5+ ✔

    Reasons for use:

    • Increase your conversion rates!
    • Give visitors reasons to stay!
    • Grab your users’ attention!

    Cases:

    • if you are using gliojs, paste your project here.

    Articles about Exit-popups:

    Install:

    • Npm: npm install gliojs
    • Bower: bower install gliojs
    • Cdn: https://cdnjs.cloudflare.com/ajax/libs/gliojs/0.0.7/glio.min.js

    Import the library glio.min.js in 'dist' folder in your site. <script src='glio.min.js'></script>

    Usage:

    The arguments are a Arrays, where the first index is the direction and the second is a callback.

    glio( [ direction, callback ] );
    

    5 Directions:

    • top
    • top-left
    • top-right
    • bottom-left
    • bottom-right

    Example:

    • top-left and top-right

        glio.init(
          [ 'top-left', function () {
              alert('this is top-left');
            }
          ],
          [ 'top-right', function () {
              alert('this is top-right');
            }
          ]
        );
      
    • all directions

      glio.init(
        [ 'top', function () {
            alert('this is top.');
          }
        ],
        [ 'top-left', function () {
            alert('this is top-left');
          }
        ],
        [ 'top-right', function () {
            alert('this is top-right');
          }
        ],
        [ 'bottom-left', function () {
            alert('this is bottom-left');
          }
        ],
        [ 'bottom-right', function () {
            alert('this is bottom-right'); 
          }
        ] 
      );
      

    Configurations:

    glio.config.key = value; Set the configuration before the init.

    • screenWidthFragment: the quantity of parts the height and width screen will be divided. Default: 12.
    • centerTopHeight: height of 'top' direction. When the mouse is equal or major this value, the callback is triggered. Default: 10.
    • heightTopLeft: height of 'top-left' direction. When the mouse is equal or major this value, the callback is triggered. Default: 30.
    • heightTopRight: height of 'top-right' direction. When the mouse is equal or major this value, the callback is triggered. Default: 30.

    This software is licensed under the MIT License.

    Show All