仅显示一次 Jquery 弹出窗口答案

【问题标题】：Show Jquery Popup Only Once仅显示一次 Jquery 弹出窗口
【发布时间】：2016-07-29 19:38:39
【问题描述】：

我有一个用户必须登录的站点，一旦完成，他们将被定向到一个新页面，并出现一个弹出框。显示弹出框没有问题，但是如果您一遍又一遍地刷新页面，则会出现弹出框。我希望它仅在他们登录后显示，并且只要他们从未退出，就再也不会显示。这意味着如果他们重新刷新页面或类似的弹出窗口将不会再次出现。是否有某种插件或简单的代码（我是 Jquery 的初学者）？

<div id="popup-image-back">
    <div class="popup-textbox">
        <div class="textbox-title">WE’VE HAD A MAKEOVER!</div>
        <div class="textbox-p">With fewer restrictions, more destinations and even better rewards you can start saving more money!</div>
    </div>
    <img class="new-popup-xclose" src="images/close-x-dark.png" />
</div>
<div id="back-wrapper"></div>

JavaScript

$(document).ready(function () {
    $('#back-wrapper').fadeIn(1000, function () {
        $('#popup-image-back').fadeIn(1000);
    });
    $(".new-popup-xclose").click(function () {
        $('#popup-image-back').fadeOut(1000);
        $('#back-wrapper').fadeOut(1000);
    });
});

【问题讨论】：

标签： jquery popup

【解决方案1】：

虽然这个线程可能很古老，但我想给出一个 OP 可以使用的答案。通过使用 cookie，您可以将页面设置为仅显示一次。由于大多数浏览器都支持cookies，这比使用当前浏览器拥有的内部存储引擎更可靠。

$(document).ready(function(){

    // test for cookie here
    if ($.cookie('test_status') != '1') {
        //show popup here
        window.open('YOUR POPUP URL HERE','windowtest','toolbar=0,status=0,width=500,height=500');

        // set cookie here if not previous set
        var date = new Date();
        var minutes = 30;
        date.setTime(date.getTime() + (minutes * 60 * 1000));
        $.cookie('test_status', '1', {expires: date});
   }

});

要对此进行测试，请务必在每次刷新之间清除 cookie。

【讨论】：

【解决方案2】：

您可以使用localstorage 来做到这一点：

if (localStorage.getItem("iswrpdivloaded") === null) {
  $('#back-wrapper').fadeIn(1000,function(){
   $('#popup-image-back').fadeIn(1000);
});
localStorage.setItem('iswrpdivloaded', 1);
}

【讨论】：

是否有某种脚本标记或链接我必须放在头部才能使本地存储代码工作？因为我试过了，失败了。
不，你没有。您只需要确保浏览器和版本支持 HTML5（几乎所有现代浏览器都支持）
那很奇怪，因为它不起作用。我将此代码包含在 document.ready 函数中，对吗？

【解决方案3】：

您可以将其用于一次弹出窗口。

$(window).load(function(){
        $('.popUp').show();
        $('.close').click(function(){
            $('.popUp').slideUp();
        });
        setTimeout('$(".popUp").fadeOut()', 10000);
    });

【讨论】：

但是每次我重新刷新页面时都会出现弹出窗口。它应该只在用户登录后显示，只要他们不退出，就不会再显示。