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有一些答案可以进一步解释它们。

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

此外，我还可以通过手机关闭弹出窗口。

希望这有帮助。

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

1 个答案: