Question

我正在尝试使用fancybox和cookie来链接链接，以便在第一次单击链接时显示表单，然后一旦提交表单，弹出窗体将不再弹出，而是打开页面URL。这是我的代码，但到目前为止，我所能做的就是在链接点击时显示弹出窗体。如何告诉fancybox不显示cookie是否存在而是转到页面链接？

<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title></title>
  <link href="http://intercross2.com/CPS_landing_page/assets/fancybox/dist/jquery.fancybox.min.css" rel="stylesheet" />
</head>
<body>
<a class="fancybox" data-fancybox data-src="#donation-info" href="thankyou.html" alt="">Fancybox</a>

  <div style="display:none">
    <div id="donation-info">
       <h2>Answer a few short questions to continue</h2>
       	<form id="gate" method="post" action="sendmail.php">

    <label for="name">Your Name</label><br>
    <input type="text" name="name" title="Enter your name" class="required"><br>

    <label for="phone">Daytime Phone</label><br>
    <input type="tel" name="phone" class="required"><br>

    <label for="email">Email</label><br>
    <input type="email" name="email" title="Enter your e-mail address" class="required email"><br>


    <input type="submit" name="submit" class="submit-link" id="submit" value="Submit" />

</form>
      
  </div>
  
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
  <script src="http://intercross2.com/CPS_landing_page/assets/fancybox/dist/jquery.fancybox.min.js"></script>
  <script>
    $(function () {
      // Define cookie name
      var cookieName = 'hide_form';
  
      // Configure fancyBox
      $('.fancybox').fancybox({
          autoDimensions: false,
          autoSize: false,
          height: 'auto',
          padding: 20,
          width: 650,
         
          afterClose: function() {
            // Set cookie to hide fancybox for 1 day
            $.cookie(cookieName, true, { expires: 1 });
          }
      });
  
      // Handle submit click event
      $('a#submit').on('click', function (event) {
          event.preventDefault(); 
  
          // Hide fancybox and set cookie to hide fancy box for 7 days
          $.fancybox.close();
          $.cookie(cookieName, true, { expires: 7 });
      });
  </script>
</body>
</html>

Answer 1

如果您需要检查cookie是否存在，请使用以下内容：

if (!!$.cookie(cookieName)) { /* Open fancyBox here */ }

其余由你决定。

Fancybox只在链接上打开第一次点击然后转到页面网址

1 个答案: