CODEWITHSUNDEEP
javascripthtmlcss
IronMocha
IronMocha

Reputation: 7

Javascript | Creating a popup that triggers just before the page is closed

I have already created a popup overlay and currently have it set to when you click a button. However, I want it so that when you have initially scrolled down on the website and then go to move your cursor towards the top of the page (towards the navigation for example) then the popup window will appear.

Javascript

// Initialize Variables
var closePopup = document.getElementById("popupclose");
var overlay = document.getElementById("overlay");
var popup = document.getElementById("popup");
var button = document.getElementById("button");
// Close Popup Event
closePopup.onclick = function() {
    overlay.style.display = 'none';
    popup.style.display = 'none';
};
// Show Overlay and Popup
button.onclick = function() {
    overlay.style.display = 'block';
    popup.style.display = 'block';
}

I have created a JSFiddle with all my current code. https://jsfiddle.net/1ud9crou/

Upvotes: 0

Views: 46

Answers (1)

MarcoS
MarcoS

Reputation: 17711

With jQuery, you could do:

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

Otherwise, with bare Javascript (if you need IE support):

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

        event = event || window.event;

        // if pageX/Y aren't available and clientX/Y are, calculate pageX/Y
        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 detect if user scrolled from top:

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

Upvotes: 1

Related Questions