Close Fancybox iframe on form submit using BUTTON tag - not working

问题

According to the Fancybox API, I am using the following code in an iframe:

<form>

... // form fields here

<button onclick="parent.$.fancybox.close();">
<span>Save</span>
</button>

</form>

The form actually closes when 'Save' is clicked -- but the form content is not submitted. It's like the close event is triggered before the form actually submits its content.

Without the onclick, content is submitted, but the subsequent page opens inside the iframe -- not what I want.

Is there a way around this?

Thanks for helping.

回答1:

You can use event.preventDefault() method like this:

<form>

... // form fields here

<button onclick="event.preventDefault(); parent.$.fancybox.close();">
<span>Save</span>
</button>

</form>

Then submit the page using jquery

So it will be better to make it in a function like this:

function closeME()
{
   event.preventDefault(); 
   parent.$.fancybox.close();
   $('#myForm').submit();
}    
    ... // form fields here

    <button onclick="closeME();">
    <span>Save</span>
    </button>



    </form>

<form action="" method="post" id="myForm">
    ... // form fields here
    <button onclick="closeME();">
    <span>Save</span>
    </button>
</form>

    <script type="text/javascript">
        function closeME() {
            event.preventDefault();
            parent.$.fancybox.close();
            $('#myForm').submit();
        }
    </script>

回答2:

I ended up solving this by creating buttons using multiple span (for style purposes) and a few lines of jQuery

<span id="save_btn" class="fc-button fc-button-prev fc-state-default fc-corner-left fc-corner-right">
        <span class="fc-button-inner">
            <span class="fc-button-content save_button">Save</span>
            <span class="fc-button-effect">
                <span></span>
            </span>
        </span>
</span>

<script>
$('#save_btn').click(function() {
  $('#my_form').submit();
});
</script>

回答3:

This one works perfect me:

$('body',top.document).removeClass('fancybox-lock');
$('.fancybox-overlay',top.document).css('display','none');

All other things didn't work.

回答4:

for other readers still having trouble getting fancybox to close from an iframe, it may be an issue with iframe being from a different origin as the parent window. that was the issue i was running into. Rob W provided an excellent solution using postMessage here Uncaught TypeError: Cannot read property 'fancybox' of undefined - Google Chrome only error?

来源：https://stackoverflow.com/questions/5491346/close-fancybox-iframe-on-form-submit-using-button-tag-not-working

标签

jquery

forms

button

onclick

fancybox