Modal forms are very popular nowadays.  While they can be confusing at times they aren't difficult to set up if you have the right tools.

There are several modules available for Drupal 7 that would serve our purpose.  I've found Simple Dialog to be the easiest to use and will demonstrate that here.

Step 1

Install and enable the Simple Dialog and Webform modules.

Step 2 

Create a webform as usual.

Step 3

While viewing the webform look at the HTML and find the container, such as a DIV, you wish to use in your modal form.  We'll need to find a container with an ID such as "node-123" or "webform-client-form-123."  This will determine how much, and which part, of the page will appear in your modal window.

Step 4

Create a link which will activate the modal form.  

<a class="simple-dialog" 
href="/path/to/target/page/to/load" 
name="id-of-element-on-target-page-to-load" 
rel="width:900;resizable:false;position:[center,60]"
 title="My Dialog Title">Link</a>

Step 5

If you need to run javascript inside the modal window you'll want to define a "Drupal behavior."  We can't use $(document).ready() since the modal form doesn't exist until activated.

Setup a javascript file that will load on the page which has the link or every page.

(function ($) {

   Drupal.behaviors.EXAMPLENAME = {
    attach: function(context, settings) {
    // Modal form javascript goes here
    }
  };
})(jQuery);

The example function above will be run by the built in drupal.js script.  In this case it will run twice.  Once when the page loads, then again when the modal form appears.

Step 6

Style your new form via CSS as usual.

Tags
Drupal
jQuery