Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>I have done an implementation similar with fancybox. I had a user checkout that upon clicking checkout, a fancybox would appear with a question prompt. Before showing the prompt it would submit the form. This is an outline of the code that I used: </p> <p>I change the form submit button to a link:</p> <pre><code>&lt;a id='various2' href='#submitform'&gt;Submit&lt;/a&gt; </code></pre> <p>Bind fancybox to the link and add an oncomplete to process the form as soon as fancybox opens:</p> <pre><code>$(document).ready(function() { $("#various2").fancybox({ 'cache' : false, 'hideOnOverlayClick' : false, 'showCloseButton' : false, 'autoDimensions' : false, 'width' : 650, 'titlePosition' : 'inside', 'transitionIn' : 'fade', 'transitionOut' : 'fade', 'scrolling' : 'no', 'onComplete' : function(){ processform(); } }); }); </code></pre> <p>Have a javascript function to process the form using ajax and then display your login/create account information. If it were me I would do another ajax call to display your login/signup but I have left that part of the code out but denoted with a comment where you can call it:</p> <pre><code>function processform(){ var idcardnumber1 = jQuery("#field1").val(); var idcardnumber2 = jQuery("#field2").val(); $.ajax({ cache : false, type: "POST", url: "processform.php", data: "field1="+field1+"&amp;field2="+field2, dataType: "json", success: function(data){ if(data.valid == 1){ // Display Your Login Signup Form } else{ // Close Fancybox since the form did not submit $.fancybox.close(); } } }); } </code></pre>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload