Drupal7: Ctools Automodal Module

I wanted to add a helpful Modal dialog box with helpful tips and definitions of stuff found on the current page url using Drupal7. I didn’t want to write a ton of code, so I went looking for a module to help me out — in the end I found a useful module called Ctools Automodal; but it did have some caveats.

Defining Your Modal Window (Content)

In order for Drupal to know what content to make modal you define a special key in a hook_menu implementation. The project page uses this example:

<?php
function mymodule_menu() {
  $items['mymodule/form'] = array(
    'page callback' => 'drupal_get_form',
    'page arguments' => array('mymodule_form'),
    'access arguments' => array('administer mymodule'),
    'modal' => TRUE, // This line is where the magic happens.
  );
}
?>

This configures the given url to show up using a javascript modal window provided by Ctools. The magic here is the key value of modal => TRUE. That’s it, you have a popup window!

Caveat #1: I attempted to use this URL with a page callback that returned a simple HTML list. This API requires that the return be a drupal $form processed through drupal_get_form. Spare yourself minutes of debugging by knowing this now!

An important item to note is you can build a simple 1 item form with the key #render. The HTML in this array will simply appear in the form. For example your form function used by drupal_get_form in hook_menu could be:

function mymodule_form($form, &$form_state) {
  $form['glossary'] = array(
    '#type' => 'fieldset',
    '#title' => 'Your Modal Title'
  );
  $form['glossary']['info'] = array(
      '#markup' => "<p>Some Info here ...</p>",
    );

  return $form;
}

Caveat #2: You have to build the link to this modal using l() or url() function for the module to fully enable the modal dialog on your Drupal page, an embedded HTML <a> tag will not suffice.

Ctools Automodal examines internal urls being generated by the system to automagically enforce the popup behavior. I used the Views Link Area to create my modal dialog link in the Header of a View.

Views Link Area configuration screen. This makes Drupal aware of our modal link without writing code.

Views Link Area configuration screen. This makes Drupal aware of our modal link without writing code.

Example modal popup window.

Example modal popup window.

Looking for quality web hosting? Look no further than Arvixe Web Hosting!

Tags: , , , , , , , , , , , | Posted under Drupal | RSS 2.0

Author Spotlight

David Gurba

David Gurba

I am a web programmer currently employed at UCSB. I have been developing web applications professionally for 8+ years now. For the last 5 years I’ve been actively developing websites primarily in PHP using Drupal. I have experience using LAMP and developing data driven websites for clients in aviation, higher education and e-commerce. If you’d like to contact me I can be reached at david.gurba@arvixe.com

Leave a Reply

Your email address will not be published. Required fields are marked *


9 × 1 =

You may use these HTML tags and attributes: <a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>