FancyBox刷新每一次点击

Question

我试图创建一个花哨的框和不幸的表单，即使它显示输入元素和正确的标记，单击任何形式导致fancybox刷新。我错过了什么，以禁用点击事件的泡沫，所以你可以实际进入一个文本输入框或选择形式的selectoptions没有花哨的盒子刷新？

$(document).ready(function() { 
     var box = $("#show_mailing_list_signup"); 


     box.fancybox({ 
      'showCloseButton': true, 
      'scrolling': 'no', 
      'titleShow': false, 
      'beforeLoad': function() { 
       return !hideMailList(); 
      }, 
      'afterLoad': function() { 

       $('#disableSignup').click(function() { 
        setCookie("hideSignup", true, 365); 
        $.fancybox.close(); 
        return false; 
       }); 

       $("#send_form").click(function() { 

        return false; 
       }); 


      } 
     }).click(); 
    }); 


<div id="show_mailing_list_signup"> 
     <form id="mailinglistForm" method="post"> 
      <h2>Header</h2> 
      <label for="name">* Name </label> 
      <p> 
       <input name="fname" type="text" id="name" minlength="4" maxlength="15" /> 
      </p> 
      <br /> 
      <label for="email">* Email </label> 
      <p> 
       <input name="email" type="text" id="email" /> 
      </p> 
      <br /> 
      <label for="state">Pick your favorite school</label> 
      <p> 
       <select id="state"> 
        <option>NY</option> 
        <option>IL</option> 
       </select> 
       <select id="city"> 
        <option>Schenectedy</option> 
        <option>Fishkill</option> 
       </select> 
      </p> 
      <p> 
       <input id="schoolSearch" type="text"/> 
      </p> 

      <%--default to the most select school--%> 
      <p style="margin-top: 20px;"> 
       <input value="Join Now" type="button" name="send_form" id="send_form" /> 
      </p> 

     </form> 
     <p class="details">blah</p> 
     <a href="#" id="disableSignup">don't show again</a> 
    </div> 

Answer 1

当你做到这一点

var box = $("#show_mailing_list_signup"); 
    box.fancybox().click() 

元素<div id="show_mailing_list_signup">（其中包含你的fancybox打开窗体）成为触发和目标的fancybox的，所以，只要你该容器内的click将一遍又一遍地触发fancybox。

更改选择到别的目标表单像

var box = $(".fancybox"); 
    box.fancybox({ 
     // API options here 
    }).click(); 

注意：你仍然需要有一个HTML元素（通常是一个链接）与class="fancybox"来定位form这样的：

<a class="fancybox" href="#show_mailing_list_signup"></a>