Exit popup easely. Detects if the mouse of a user leaves the viewport borders of your website
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist
README-PT.md
README.md
bower.json
glio.js
package.json

README.md

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.