Question

我已经在HTML中创建了一个弹出窗口，以便当您尝试离开站点（光标朝向书签栏）时，它会弹出并显示一条消息。然而，这种情况无限次发生;我需要设置它，以便每个会话只弹出一次。

我有以下内容：

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>

初始化变量：

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

当用户离开网站时：

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

Answer 1

我会使用一个初始化为false的布尔值（类似于popupShown），并在显示弹出窗口时设置为true。然后在显示弹出窗口

之前检查以确保此变量为false

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

然后将布尔值popupShown存储到会话中，并在您想要检查它时检索该变量！

Answer 2

不想深入了解，但请查看此回复，看看它是否有助于您制定解决方案https://stackoverflow.com/a/24103596/4342231

离开网站时的JS弹出窗口

2 个答案: