How to close iframe in parent on successful login?

Question

I'm trying to make login form open in iframe. If the login is successful when the user clicks submit button, I want iframe to close and redirect browser to index.php. The problem is that I don't know how to close iframe from that point.

Here's the code relevant to iframe that I have:

login.tmpl (html file, where the form is)

<div class="form_item submit_button">
  <button type="submit" name="submit">Login</button>
</div>

login.php (where i redirect to index. this is where i think i need some extra code to close iframe)

  if (!$error) {
        throw new RedirectBrowserException('index.php');
  }

gallery.tmpl (where iframe is called. should not be important i think)

<a class="fancybox iframe fancybox.iframe" href="login.php">Iframe Login</a>

Edit. Here's my jQuery code (gallery.tmpl):

        $(document).ready(function() {
          $(".fancybox").fancybox({
            padding : 0,
            prevEffect : 'none',
            nextEffect : 'none',
            helpers : {
                title : {
                  type: 'over'
                },
                thumbs : {
                  width : 50,
                  height : 50
                }
            }
          });
        });
        $(document).ready(function() {
          $("a.iframe").fancybox({
            autoDimensions : false,
            autoSize : false,
            padding : 0,
            width : 395,
            height : 195,
            type : 'iframe'
          });
        });

Answer 1

You could rather redirect to index.php from the page that opened fancybox (gallery.tmpl). Just add a callback in your fancybox custom script :

$(".fancybox").fancybox({
   afterClose : function(){
      // redirects to another file after closing
      window.location.href = "index.php";
   }
});

Then, inside loging.php you could do this to close fancybox on success:

<?php if (!$error) { ?>
  <script>parent.jQuery.fancybox.close();</script>
<?php }; ?>