如何使用js-cookie创建两个cookie?

时间:2017-03-21 18:06:32

标签: javascript jquery twitter-bootstrap cookies js-cookie

我在使用js-cookie设置两个cookie时遇到了一些麻烦。我有一个bootstrap模式,在页面加载时出现15秒。在模式中是电子邮件订阅表单。单击订阅按钮后,它会创建一个cookie,以防止出现爆发。如果此人决定不订阅,我想创建第二个cookie。他们可以点击x关闭。我希望x创建另一个阻止弹出窗口的cookie但只在1天后到期。它似乎在Chrome中运行,但是当我在Firefox上进行双重检查时,它无法正常工作。

这是我之前的JS

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


<script>
 //<![CDATA[
 $(document).ready(function(){
   if(!Cookies.get('hide-div'))
   if(!Cookies.get ('popup')){
      setTimeout(function() {
       $('#myModal').modal();
      }, 15000);
   }

   $("#sub-button").click(function () {
     Cookies.set('hide-div', true, { expires: 1000 });
   });  
   $("#sub-button2").click(function () {
     Cookies.set('hide-div', true, { expires: 1000 });
   });
   $("#preventpopup").click(function () {
     Cookies.set('popup', true, { expires: 1 });
   });
 })
 //]]>
 </script>

HTML

 <!-- Modal -->
 <div aria-labelledby='myModalLabel' class='modal fade' id='myModal'   role='dialog' tabindex='-1'>
   <div class='modal-dialog' role='document'>
     <div class='modal-content' style='background-color: rgb(255, 241, 237);'>
       <div class='modal-body'>
         <button aria-label='Close' class='close' data-dismiss='modal' type='button'>
           <span aria-hidden='true' id='preventpopup'>&#215;</span>
         </button>
       <h4 class='modal-title' id='myModalLabel' style='text-align: center;font-size: 60px; font-family: &apos;Allura&apos;, cursive;margin-top: 25px;'>Let&#39;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 action='https://feedburner.google.com/fb/a/mailverify' data-toggle='validator' id='myform' method='post' onsubmit='window.open(&apos;https://feedburner.google.com/fb/a/mailverify?uri=blogspot/CqrSa&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' style='padding:3px;text-align:center;' target='popupwindow'>
             <p style='font-family: raleway; text-transform: uppercase; margin-top: 20px;'>Enter your email address:</p>
             <p>
                 <input class='form-control' data-error='Please enter a valid email.' id='inputEmail' name='email' style='width:250px; display:inline-block' type='email'/>
                 <div class='help-block with-errors'/>                              
             </p>
             <input name='uri' type='hidden' value='blogspot/CqrSa'/>                                   <input name='loc' type='hidden' value='en_US'/>
                <div class='form-group'>
                    <input class='btn btn-primary' id='sub-button' style='font-family: raleway; text-transform: uppercase; margin-bottom: 25px;' type='submit' value='Subscribe'/>
                </div>
                <h6 aria-label='Close' data-dismiss='modal' id='sub-button2' type='button'><a href='#'>Already a subscriber? Click here to prevent future pop ups.</a></h6>
                <h6><small>This website uses cookies so that we may provide you with the best user experience.</small></h6>
        </form>
      </div>
     </div>
    </div>

1 个答案:

答案 0 :(得分:1)

我的问题由Nimmi回答,见上述评论。我从span中删除了“id ='preventpopup'”并将其移动到按钮。工作就像一个魅力。