JS popup window when leaving the site

Question

I have created a popup window in HTML and have it so that when you attempt to leave the site (cursor goes towards the bookmark bar) it pops up and displays a message. However, this happens unlimited times; I need to set it so that it only pops up once per session.

I have the following:

HTML:

<div id="maincontent">
    <button id="button">Show Popup</button>
</div>
<div id="overlay"></div>
<div id="popup">
    <div class="popupcontrols">
        <span id="popupclose">X</span>
    </div>
    <div class="popupcontent">
        <h2 class="popupHeader">Keep up to date!</h2>
        <p clas="popupText">Subscribe to our mailing list now to ensure you keep up to date with all the latest news and announcements that we offer.</p>
        <form>
        <!-- Email entry -->
            <div class="form-group">
                <input class="form-control" id="subscribe" type="email" placeholder="Your E-mail" required> 
            </div>
        <!-- Button -->
        <div class="form-group">
                            <button type="button" class="btn btn-block btn-info" onclick="_itq.push(document.getElementById('subscribe').value)">Subscribe                      </button>
        </div>
        </form>

    </div>
</div>

Initialise Variable:

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

When user leaves site:

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

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

score 1 · Accepted Answer · answered Feb 27 '17 at 18:47

I would use a boolean (something like popupShown) that is initialized to false, and is set to true when the popup is shown. Then just check to make sure this variable is false before showing the popup

var popupShown = false;
...
// Show Overlay and Popup
button.onclick = function() {
    if (!popupShown) { 
        overlay.style.display = 'block';
        popup.style.display = 'block';
        popupShown = true;
    }
}

Then store the boolean popupShown into a session, and retrieve the variable whenever you wish to check it!

score 0 · Answer 2 · edited May 23 '17 at 12:25

0

Not wanting to dive to deep but look at this response and see if it aids you in developing a solution https://stackoverflow.com/a/24103596/4342231

edited May 23 '17 at 12:25

Community

1
1

answered Feb 27 '17 at 18:47

Ameji012

81
4

Thank you, I hadn't thought of looking into cookies. – Feb 27 '17 at 18:48

JS popup window when leaving the site

2 Answers2