JQuery Modal Boxes and Iframe
Sounds like you already found the answer but for the benefit of others you can close an iFrame implementation of FancyBox by using the following JavaScript in the iFrame:
parent.$.fn.fancybox.close();
Below is a basic dialog interaction loading content into an iFrame and then closing the dialog from the iFrame.
Note that to illustrate this I have two code snippets. The first is labeled file1.html. The second you should name "myPage.html" if you want it to work and place it in the same directory as the first file.
Note that the call to close the dialog could be used in other ways depending on your desired functionality. For example another example could be on successful form submission.
Create the files locally on your system and open file1.html and try it out.
file1.html
<html> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script> <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/themes/base/jquery-ui.css"/> <script type="text/javascript"> $(document).ready(function() { $("#modalDiv").dialog({ modal: true, autoOpen: false, height: '180', width: '320', draggable: true, resizeable: true, title: 'IFrame Modal Dialog' }); $('#goToMyPage').click( function() { url = 'myPage.html'; $("#modalDiv").dialog("open"); $("#modalIFrame").attr('src',url); return false; }); }); </script> </head> <body> <a id="goToMyPage" href="#">Go to My Page</a> <div id="modalDiv"><iframe id="modalIFrame" width="100%" height="100%" marginWidth="0" marginHeight="0" frameBorder="0" scrolling="auto" title="Dialog Title"></iframe></div> </body></html>myPage.html
<html> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script> <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/themes/base/jquery-ui.css"/> <script type="text/javascript"> $(document).ready(function() { $('#clickToClose').click( function() { window.parent.$("#modalDiv").dialog('close'); return false; }); // uncomment and use the below line close when document is ready (no click action by user needed) // the same call could be put elsewhere depending on desired functionality (after successful form submit, etc.) // window.parent.$("#modalDiv").dialog('close'); }); </script> </head> <body> <a id="clickToClose" href="#">Click to close.</a> </body></html>
Fancybox is also another option. Works similarly to Thickbox
EDIT:
It appears after some playing around that the plugin does not natively support closing the Fancybox through an child iframe element. I think that this is certainly achievable with a little effort (I started hacking together something here, although I stress that this was simply a POC and does not work as the button within the iframe removes the fancybox div wrapper from the DOM and therefore does not display when you click the google image again).I am wondering however, if an iframe is the right lines to go down.
For adding a user, my thought would be that you could present the user with a modal form like the one on the Monster site you get when you click 'Sign In.' Once you click add user, make an AJAX call to your datasource to insert a new user and then on returning success, you could either initiate a page refresh or use AJAX to update the list.
For editing a user, once a user is selected, you could make an AJAX call with a user id to populate a modal form with the user details retrieved from your data source when the AJAX call returns success. Once you have finished editing the user, make an AJAX call to update your datasource and then again, initiate a page refresh or use AJAX to update the list.
Instead of the page refresh or final AJAX call in each scenario, you could simply use JavaScript/jQuery to update the list/ list details, depending on whether a user has been added or edited, respectively.