CF7 表单提交成功后永久隐藏 Div，直到缓存或 cookie 被清除

Posted 2023-05-09

【中文标题】CF7 表单提交成功后永久隐藏 Div，直到缓存或 cookie 被清除

【英文标题】：Hide Div permanently when CF7 form is submitted successfuly until cache or cookies is cleared

【发布时间】：2020-06-03 07:21:48

【问题描述】：

我有这个脚本，当您单击关闭按钮时，它会以 5、10 15 秒的间隔弹出一个 div

var iteration = 0;
var times = [5,10,15]

var showPopUp = function(time) 
    setTimeout(function()  
        jQuery('.pop_timer_box').css('display','flex');
    , time)


showPopUp(times[iteration]);

jQuery('body').on('click', '.cclose_pop', function() 
    jQuery('.pop_timer_box').hide();
    iteration +=1;
    if (iteration < <?=$interval_array_count?>) 
      showPopUp(times[iteration])
    
);

div里面是一个联系表单7，下面的代码在表单提交的时候隐藏了这个div

document.addEventListener( 'wpcf7mailsent', function( event ) 
    if(event.detail.contactFormId == '10917') 
    jQuery('.pop_timer_box').hide();
    
, false ); 

我的问题是如何做到这一点，以便当我提交表单并且成功时弹出表单将不再出现，除非缓存或 cookie 或本地存储被清除

【问题讨论】：

我认为在客户端是不可能的。您可以通过使用节点将 id 存储在文件或数据库中来从服务器端执行此操作。

你可以尝试通过 localStorage.setItem('showpopup', 'yes');然后当表单提交成功时，将相同的值更新为“否”，然后在你的函数中第一次检查 localStorage 值

但是如果 localStorage 被清除然后它会再次显示

【参考方案1】：

function setCookie(cname,cvalue,exdays) 
  var d = new Date();
  d.setTime(d.getTime() + (exdays*24*60*60*1000));
  var expires = "expires=" + d.toGMTString();
  document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
	

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

function showNewsletterPopUp()
	$(window).scroll(function() 
	   if($(window).scrollTop() > 100) 
	    $('.popup').fadeIn(300);	
	   

	);
	jQuery(function($) 
	    $('.parallax').on('scroll', function() 
	    	if($(".parallax").scrollTop() > 100) 
		    	$('.popup').fadeIn(300);	
			
	    )
	);
	$('.pop_close').click(function()
    	$('.popup').addClass('hide_this');
    );   

function checkCookie() 
	
	//console.log('hgghhggh');
  var user = getCookie("popup-attribute");

  if(typeof user === "undefined" || user == null || user == '')
	  console.log('HERE');
      showNewsletterPopUp();
      setCookie("popup-attribute", 'enable', 7);
  

checkCookie();