Using Javascript to generate a popup that appears right before the user tries to navigate away from the page

Question

Using Javascript to generate a popup that appears right before the user tries to navigate away from the page

I have implemented a pop-up overlay on my website, triggered by clicking a button. However, I am looking to enhance this functionality so that when users scroll down the webpage and then move their cursor towards the top of the page (such as the navigation bar), the pop-up window will automatically appear.

Javascript

// Setup Variables
var closePopup = document.getElementById("popupclose");
var overlay = document.getElementById("overlay");
var popup = document.getElementById("popup");
var button = document.getElementById("button");
// Close Popup Function
closePopup.onclick = function() {
    overlay.style.display = 'none';
    popup.style.display = 'none';
};
// Display Overlay and Pop-up
button.onclick = function() {
    overlay.style.display = 'block';
    popup.style.display = 'block';
}

For a demo showcasing all the code, check out my JSFiddle. https://jsfiddle.net/1ud9crou/

javascript html css

Answer 1

Answer №1

In jQuery, here is a way to achieve it:

var isOnTop = false;
$(window).on('mousemove', function(e) {
    mouseIsOnTop = e.pageY < 20;
    if (mouseIsOnTop) {
        button.onclick();
    }
});

If you prefer using pure Javascript for IE support, you can do the following:

(function() {
    document.onmousemove = handleMouseMove;
    function handleMouseMove(event) {
        var dot, eventDoc, doc, body, pageX, pageY;

        event = event || window.event;

        if (event.pageX == null && event.clientX != null) {
            eventDoc = (event.target && event.target.ownerDocument) || document;
            doc = eventDoc.documentElement;
            body = eventDoc.body;
            event.pageX = event.clientX +
              (doc && doc.scrollLeft || body && body.scrollLeft || 0) -
              (doc && doc.clientLeft || body && body.clientLeft || 0);
            event.pageY = event.clientY +
              (doc && doc.scrollTop  || body && body.scrollTop  || 0) -
              (doc && doc.clientTop  || body && body.clientTop  || 0 );
        }

        mouseIsOnTop = event.pageY < 20;
        if (mouseIsOnTop) {
            button.onclick();
        }
    }
})();

UPDATE: To determine if user has scrolled from the top:

var userDidScrollABit = false;
window.onscroll = function() {
    var body = document.body;
    var doc = document.documentElement;
    doc = (doc.clientHeight) ? doc : body;
    if (doc.scrollTop > 20) {
        userDidScrollABit = true;
    }
};

Answer 2

In jQuery, here is a way to achieve it:

var isOnTop = false;
$(window).on('mousemove', function(e) {
    mouseIsOnTop = e.pageY < 20;
    if (mouseIsOnTop) {
        button.onclick();
    }
});

If you prefer using pure Javascript for IE support, you can do the following:

(function() {
    document.onmousemove = handleMouseMove;
    function handleMouseMove(event) {
        var dot, eventDoc, doc, body, pageX, pageY;

        event = event || window.event;

        if (event.pageX == null && event.clientX != null) {
            eventDoc = (event.target && event.target.ownerDocument) || document;
            doc = eventDoc.documentElement;
            body = eventDoc.body;
            event.pageX = event.clientX +
              (doc && doc.scrollLeft || body && body.scrollLeft || 0) -
              (doc && doc.clientLeft || body && body.clientLeft || 0);
            event.pageY = event.clientY +
              (doc && doc.scrollTop  || body && body.scrollTop  || 0) -
              (doc && doc.clientTop  || body && body.clientTop  || 0 );
        }

        mouseIsOnTop = event.pageY < 20;
        if (mouseIsOnTop) {
            button.onclick();
        }
    }
})();

UPDATE: To determine if user has scrolled from the top:

var userDidScrollABit = false;
window.onscroll = function() {
    var body = document.body;
    var doc = document.documentElement;
    doc = (doc.clientHeight) ? doc : body;
    if (doc.scrollTop > 20) {
        userDidScrollABit = true;
    }
};

Using Javascript to generate a popup that appears right before the user tries to navigate away from the page

Answer №1

Similar questions

Tips for adding a background image to your website

Only apply the z-index style in React rendering when it is specifically set to zero

Setting the height of content using jQuery can be a useful solution when dealing with small window sizes to prevent it from

Countdown alert using JavaScript

I need a regular expression in React JS that matches the following condition. Can anyone provide one?

What is the best way to update the context while iterating through a jQuery each loop?

Implementing sliders for interactive functionality with an HTML table

Different browsers have varying ways of handling transition end callbacks with AddEventListener()

Creating a Self Closing Alert Message in AngularJS: A Step-by-Step Guide

Dynamic motion of balloons using jquery technology

Guide to integrating react-phone-number-input into material-ui TextField

Get a single object from an array with .single method provided by @ngrx

Implementing a delay between two div elements using jQuery

Changing the title of a webpage dynamically with dropdown menu selections using AngularJS

What is the best way to retrieve the outcome of a node-sqlite3 query beyond the scope of db.get()?

Starting an AngularJS module without an HTML page may seem like a daunting task,

unable to render a vector layer in openlayers 6

Issue with IE canvas dataURI security violation

What could be causing the console.log to not work in this Express code snippet?

Incorporating Scatter Dots into a Horizontal Stacked Bar Chart using Chart.js