弹出窗口未按需要在每个会话中显示一次（如客户所述）

Question

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

我应该用下面的代码更改什么吗？另外，我无法通过触摸点击移动设备上的关闭按钮。如何让 #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 中关闭 phone 的弹出窗口。

希望这对您有所帮助。

弹出窗口未按需要在每个会话中显示一次（如客户所述）

Popup not showing once per session as wanted (as mentioned by client)

html

javascript

css

mobile

jquery