一旦按钮被点击cookie，如何关闭弹出式模式？

我正在使用插件js-cookie来创建cookie。所以，我有一个引导模式，在15秒后弹出一个电子邮件订阅表单。我想要的是订阅按钮创建一个cookie，防止未来的弹出窗口。我以前从来没有创建过饼干，而且我对JS也不怎么样，所以请和我一起裸照。我认为我的逻辑在这里可能是错误的。开发工具显示cookie，但我刷新并弹出仍然出现。一旦按钮被点击cookie，如何关闭弹出式模式？

<!-- Modal --> 
      <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
      <div class="modal-dialog" role="document"> 
       <div class="modal-content" style="background-color: rgb(255, 241, 237);"> 
       <div class="modal-body"> 
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"> 
         <span aria-hidden="true">&#xD7;</span> 
        </button> 
        <h4 class="modal-title" id="myModalLabel" style="text-align: center;font-size: 60px; font-family: 'Allura', cursive;margin-top: 25px;"> 
         Let's be mom friends! 
        </h4> 
        <h6 style="text-align: center; text-transform: uppercase; font-family: raleway;"> 
         Subscribe today to receive exclusive MIM content updates directly to your inbox! 
        </h6> 
        <form style="padding:3px;text-align:center;" action="https://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('https://feedburner.google.com/fb/a/mailverify?uri=blogspot/CqrSa', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"> 
         <p style="font-family: raleway; text-transform: uppercase; margin-top: 20px;"> 
          Enter your email address: 
         </p> 
         <p> 
          <input type="text" style="width:250px" name="email"/> 
         </p> 
         <input type="hidden" value="blogspot/CqrSa" name="uri"/>          
         <input type="hidden" name="loc" value="en_US"/> 
         <input type="submit" value="Subscribe" class="btn btn-primary" id="sub-button" style="font-family: raleway; text-transform: uppercase; margin-bottom: 25px;"/> 
        </form> 
       </div> 
       </div> 
      </div> 
      </div> 
     </div> 
    </div> 
</div> 

<script> 
setTimeout(function() { 
    $('#myModal').modal(); 
}, 15000); 
</script>

....其它JS库这里....

<!-- Latest js-cookie--> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-cookie/2.1.2/js.cookie.js">  </script> 


<script> 
    jQuery(document).ready(function($) { 
     $("#sub-button").click(function() { 
      Cookies.set('hide-div', true, { expires: 365 }); 
     });   
    }); 
</script>

来源

2017-03-16 Jessica

听起来好像隐藏电子邮件表格提交 –

我的两个脚本合并成一个，例如：

$(document).ready(function(){ 
    if(!Cookies.get('hide-div')){ 
    setTimeout(function() { 
     $('#myModal').modal(); 
    }, 15000); 
    } 

    $("#sub-button").click(function() { 
     Cookies.set('hide-div', true, { expires: 365 }); 
    }); 
});

这种方式，模式不会打开如果客户端已经拥有了“捉迷藏DIV”的cookie设置为true。

来源

2017-03-16 17:04:27

谢谢，这是非常有用的。它工作:)再次感谢。 – Jessica

我认为你只是缺少检查，如果已经有调用setTimeout(...)函数之前设置一个cookie。你可以尝试这样的事情 - >

if (!Cookies.get('hide-div')) { 
    setTimeout(function() { 
     $('#myModal').modal(); 
    }, 15000); 
}

这确保了如果hide-div cookie设置为true的setTimeout才会执行。

来源

2017-03-16 17:01:15

一旦按钮被点击cookie，如何关闭弹出式模式？

回答

相关问题