Modal forms with jQuery in Drupal 7

You are here

Categories:

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.

Done right, right here.  

All our work is performed by qualified, experienced developers right here in America.

Talk to Us  Talk to Us

Find out what we can do for your business. Contact us to arrange a demonstration, get a price quote, or just ask questions.

Better still, call us and speak to a Drupal developer right here in Northern Virginia.

(703) 879-6985