View & Edit InfoPath Forms in the SharePoint 2010 Modal Dialog

Recently, there was a requirement in my project that, an InfoPath form (which was stored in a Forms Library on SharePoint) had to be displayed as a pop-up when the user clicked on a particular HTML page element. The user also had to have the functionality to save the changes he/she made to the displyed form.

So naturally, my first thought was to use the JavaScript Modal Dialog which SharePoint provides out of the box. Now, My challenge was to provide it with a relevant URL which pointed to my desired InfoPath form.

I navigated to my InfoPath form stored in the Forms Library and observed the URL which showed in the browser. It was similar to the following:

 [SiteCollection]/_layouts/FormServer.aspx?XmlLocation=[RelativeURLofFormXML]&Source=[FormsLibraryAbsolutePath]&DefaultItemOpen=1

Where:
SiteCollection: URL of the Site Collection
RelativeURLofFormXML: relative path of the XML file of the InfoPath form I wanted to display.
FormsLibraryAbsolutePath: The absolute path of the Forms Library which contained my InfoPath form.

Now, the only thing remaining to do was to take the JavaScript modal dialog and push the form url into it, which i did with the following code:

After that, I assigned the OpenForm( ) function to an anchor tag and when i clicked on it:

I was even able to save the form after filling it! :)