[SOLVED] Close jQuery popup (external page) window

Close jQuery popup (external page) window

Setup:

Popup Page:

<html>
    <head>
        <title>popup page</title>
    </head>
    <body>
        <label for="txtArea">Comments:</label>
        <textarea id="txtArea" type="text" rows="5" cols="25">
        </textarea>
        <input type="submit" value="submit" />&nbsp;
            <input type="button" value="cancel" />
    </body>
</html>

Main Page:

<html>
    <head>
        <title>popup page</title>
    </head>
    <body>
        <a href="#" id="lnkPopup">Post Comment</a>
    </body>
</html>

Problem:

I want to open the popup page on clicking of link in main page. This is easily achievable with so many awsome jQuery plugins, but tht problem is that I want to close the popup when user clicks submit or cancel button. How can I achieve this? I have seen exemples where another block from same page is shown and we have IDs of elements in it but not the external page.

Solution

As you are already using jQuery you could open your popup as a modal window.

One good plugin for this scenario is Fancybox

From within the modal window you can easily close the window pressing the submit button:

<script type="text/javascript" language="javascript">
  $(document).ready(function(){
    $("form#yourform").submit(function() {
       parent.$.fancybox.close();
     });});
</script>