Javascript |创建一个在页面关闭前触发的弹出窗口

Question

我已经创建了一个弹出窗口覆盖，目前将其设置为当您单击按钮时。但是，我希望这样当您最初在网站上向下滚动然后将光标移到页面顶部(例如导航)时，弹出窗口就会出现。

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';
}

我已经用我当前的所有代码创建了一个 JSFiddle。 https://jsfiddle.net/1ud9crou/

Answer 1

使用 jQuery，您可以:

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

否则，使用纯 Javascript(如果您需要 IE 支持):

(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();
        }
    }
})();

更新:检测用户是否从顶部滚动:

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;
    }
};