javascript - 弹出窗口未按需要在每个 session 中显示一次(如客户所述)

Question

我正在尝试让一个弹出窗口在每个 session 加载时显示一次。从我这边看没问题，但我的客户说即使在重新启动浏览器并清除缓存后，他也没有在第一次看到它。

我应该用下面的代码更改什么吗？另外，我无法通过触摸点击移动设备上的关闭按钮。如何让 #popup-close 响应触摸？

HTML

<div id="popup-wrap">
    <div id="popup">
        <div id="popup-close">&times;</div>
        <a href="http://google.com/" target="_blank">
            <img src="image.jpg" width="100">
        </a>
        <h2>We are featured this month in Architectural Digest!</h2>
        <a href="http://www.architecturaldigest.com/" target="_blank">Read the article &raquo;</a>
    </div>
</div>

JS

if (localStorage.getItem('popState') != 'shown'){
    $("#popup-wrap").delay(2000).fadeIn();
    localStorage.setItem('popState','shown')
}

$('#popup-close').click(function(e) {
    e.preventDefault();
    $('#popup-wrap').fadeOut(); // Now the pop up is hidden.
});

CSS

#popup-wrap {
    background: #fff;
    box-shadow: 1px 0 3px #999;
    display: none;
    font-family: 'montserrat', sans-serif;
    height: 210px;
    left: 50%;
    margin-left: -250px;
    margin-top: -105px;
    opacity: .8;
    position: absolute;
    text-transform: uppercase;
    top: 50%;
    width: 500px;
    z-index: 11;
}

#popup {
    padding: 40px;
    position: absolute;
}

#popup-close {
    cursor: pointer;
    font-size: 36px;
    position: absolute;
    right: 10px;
    top: 0;
}

#popup img {
    float: left;
    margin-right: 20px;
}

#popup h2 {
    color: #222;
    font-size: 20px;
    margin-bottom: .5em;
}

#popup a {
    font-size: 12px;
    text-decoration: none;
}

http://jsfiddle.net/23gu3L0h/

Answer 1

您可以像我一样尝试将 localStorage 更改为 sessionStorage In this Fiddle .

localStorage 用于长期使用，而 sessionStorage 则更短期。 Here is another post一些答案进一步解释了它们。

它会显示一次，直到您清除缓存或重新启动浏览器。

此外，我还能够在 fiddle 中通过手机关闭弹出窗口。

希望这对您有所帮助。