Question

I’ve got a login form opening in a FancyBox 2 modal iframe window. But when you submit the form, the web page is opening within the modal.

Can anyone tell me if and how to make the Fancybox modal close, and the underlying page re-load when the login form is submitted please?

Here’s my current code – within a functions.js file:

  $(".login-popup").fancybox({
    maxWidth    : 310,
    height      : 300,
    autoSize    : false,
    closeClick  : false,
    openEffect  : 'none',
    closeEffect : 'none'
  });

And here’s my login link:

<a class="login-popup" data-fancybox-type="iframe" href="/popup/login" title="">Login</a>

Thanks for any help,

Ste

Edit 1:

Thanks for the help with this. Sorry for being a complete newbie, but I’m having trouble getting the parent.$.fancybox.close(); to work on the form submit() event. Here’s the code I’m now using but it doens’t close the window as I’m doing something wrong. Any ideas what? Thanks.

$(".login-popup").fancybox({
    closeEffect : 'none',
    'afterClose':function () {
      window.location.reload();
    },
  });

$(".login-form").submit(function(){
  parent.fancyBoxClose();
});

Answer 1

To close the fancybox from within the iframe, you can use parent.$.fancybox.close(); on the form submit() event.

Then add an onClose event on the Fancybox initializer, which would reload the page:

$(".login-popup").fancybox({
    maxWidth    : 310,
    height      : 300,
    autoSize    : false,
    closeClick  : false,
    openEffect  : 'none',
    closeEffect : 'none',
    'afterClose':function () {
        window.location.reload();
    },
  });