如何创建一个仅显示 1 次的弹出框

Question

我在网站主页上创建了这个弹出窗口。但是这里有一个问题，当我在访问了网站的其他页面后回到主页时，页面再次加载，并且再次显示弹出窗口。我希望弹出窗口只显示 1 次，即使您重新加载了页面。喜欢这个网站“https://www.livpuresleep.com/”。

$(document).ready(function(){
      var popup =   setTimeout(function(){
            $('#popUp').css('display','block'); }, 3000);
        }); 

    $('.close-popup').click(function(){
        $('#popUp').css('display','none');
          clearTimeout(popup);
    });

<div id="popUpmain">
        <form action="">
            <div id="popUp" style="display:none">
                <h1 class="popUp-heading">Sign Up</h1>
                <input type="text" class="pop-up-name" placeholder="Your Name">
                <input type="text" class="pop-up-email" placeholder="Email">
                <input type="text" class="pop-up-number" placeholder="Number">
                <select name="Select Product" id="" class="popup-select">
                    <option value="Select Product active">Select Product</option>
                    <option value="Mattress">Mattress</option>
                    <option value="Select Product active">Comforter</option>
                    <option value="Select Product active">pillow</option>
                </select> 
                <input type="submit" class="popup-btn close-popup">
                <button type="button" class="close-btn close-popup">Not Now</button>
            </div>
        </form>
    </div>

Answer 1

您可以设置一个 cookie，然后在生成弹出窗口之前检查它是否存在。

设置cookie的功能：

function setCookie(cookieName, cookieValue, cookieExpiration) {
  var date = new Date();
  date.setTime(date.getTime() + (cookieExpiration*24*60*60*1000));
  var expires = "expires="+ date.toUTCString();
  document.cookie = cookieName + "=" + cookieValue + ";" + expires + ";path=/";
}

获取cookie的函数：

function getCookie(cookieName) {
  var name = cookieName + "=";
  var decodedCookie = decodeURIComponent(document.cookie);
  var cookieArray = decodedCookie.split(';');
  for(var i = 0; i <cookieArray.length; i++) {
    var cookie = cookieArray[i];
    while (cookie.charAt(0) == ' ') {
      cookie = cookie.substring(1);
    }
    if (cookie.indexOf(name) == 0) {
      return cookie.substring(name.length, cookie.length);
    }
  }
  return "";
}

您的代码将如下所示：

if(getCookie("hidePopup") != 1) {
  $(document).ready(function(){
      var popup = setTimeout(function(){
        $('#popUp').css('display','block'); }, 3000);
      }); 
  $('.close-popup').click(function(){
    $('#popUp').css('display','none');
    clearTimeout(popup);
    setCookie("hidePopup", 1, 365);
  });
}