Question

我有4-5个HTML页面，我只想显示一次弹出窗口，这意味着应该在每个页面中显示弹出窗口。一切正常。

但是我想，当使用关闭图标隐藏模式时，它永远不会在关闭窗口选项卡之前显示。

$(function () {
    if (localStorage.getItem('popState') != 'shown') {
        $("#popup").fadeIn();
        localStorage.setItem('popState', 'shown');
    }

    $('#popup-close').click(function (e) {
        $('#popup').fadeOut();
        localStorage.setItem('popState', 'shown');
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="footer-alert" id="popup" style="display:none;">
  <div class="footer-alert-close" id="popup-close">X</div>
  <p>We use cookies to make interactions with our websites and services easier and more meaningful, including learning to understand how they are used. You can read more about our <a href="privacy.html"><b>Privacy &amp; Cookies Policy here</b></a>. By continuing
    to use this site you are giving us your consent to our policy.</p>
</div>

Answer 1

您必须从localStorage.setItem('popState', 'shown');中删除if (localStorage.getItem('popState') != 'shown')，因为在页面加载时始终将your local storage设置为

执行此操作

    $(function () {
        if (localStorage.getItem('popState') != 'shown') {
            $("#popup").fadeIn();
        }

        $('#popup-close').click(function (e) {
            $('#popup').fadeOut();
            localStorage.setItem('popState', 'shown');
        });
    });

Answer 2

我从您的问题中了解到，您想在所有页面上显示弹出窗口，直到关闭为止。一旦用户关闭它，您就不想在同一会话中再次显示它。

您将需要删除这两行，因为它们每次在新的html页面上都会重置会话存储，即使弹出窗口关闭一次也将提示弹出窗口）：-

if($(window).scrollTop() + $(window).height() == $(document).height()) {
   //Prevent Scrolling
}

您甚至可以根据需要尝试使用本地存储或cookie。

如何在所有HTML页面中弹出一次？

2 个答案: