Blog

The modal, the less obtrusive cousin of the popup window, is an effect that overlays a page element over a webpage. In contrast to the popup browser window, a modal also restricts access to the underlying page until the modal receives some interaction from the user. Why use a modal? There are several use cases including the awesome obliteration of the need to ever use a popup again. Perhaps the best reason is that a modal allows you to show and/or receive information from your end user without requiring a page reload. In short, a modal can improve usability by increasing the amount of content available on a page without unnecessary clutter. One common use for a modal is the very popular Lightbox effect for showing images or other content from a gallery of thumbnails or other triggering element. Other uses range from displaying warning, help (tooltip), confirmation or error messages to displaying a form. In Drupal 7, as in older versions, there is more than one way to do almost anything. Your choice for a modal solution comes down to your specific use case and a touch of personal preference. Let's look at some use cases specific to Drupal.

Modal Nodes

There is an excellent use case for showing the details of a node from a specific content type in a modal window. Given a view consisting of a group of nodes where the full details of said nodes don't warrant a full page display, a modal is the perfect option. A calendar is one example of such a view. In cases like this and for the display of other relatively small chunks of text I quite like the Colorbox module. If you're at all familiar with jQuery, you may already know the name Colorbox. In jQuery, Colorbox is a light-weight lightbox plugin. This module integrates this functionality into Drupal versions 6 and 7. Colorbox also gives you an easy option for building galleries and slideshows of images, videos or fields. Checkout the documentation to see how you can use Colorbox as a formatter in entities and views, it's pretty awesome. While Colorbox gives you a lot of functionality with relatively little effort, it falls short when it comes to integrating modal forms. There was an effort to incorporate support for opening various types of forms using Colorbox but this has since been deprecated.

Drupal Forms

Drupal comes with a number of built-in forms such as the log in, new password, new account, contact and comment forms. All of these forms have another thing in common, they are tiny. As such, they lend themselves well to a modal display. The module Modal forms utilizes the modal feature available through the fantastically useful and popular module Chaos tool suite (commonly referred to as ctools) in order to display these forms in a modal window. CTools is primarily a set of APIs for use by developers to implement plugins, exportables, AJAX, forms and much more. For the most part these tools are made available in your custom code, with the exception of the sub-module Page Manager. The Modal forms module takes the modal API functions from ctools and makes it a breeze to rewrite the links to Drupal's built-in forms so they open in a modal. In fact, after installation, you only need to configure the module to enable the rewriting of each of these links. Examples from the module homepage shows how simple it is to output these links in your own custom code; $links[] = ctools_modal_text_button(t('Modal Login'), 'modal_forms/nojs/login', t('Login via modal')); $links[] = ctools_modal_text_button(t('Modal Login'), 'modal_forms/nojs/login', t('Login via modal'),  'ctools-modal-modal-popup-small'); or manually, like in a template or full HTML node; <a href="modal_forms/nojs/login">Modal Login</a> <a href="modal_forms/nojs/login">Modal Login</a>

Webforms

Speaking of forms, I have found the Webform module to be handy in any number of use cases. Webform gives you the ability to collect data from your end users that you can then review from within the admin, export, or even re-purpose using the Webform API. It is not a module that lends itself to user-generated content (i.e. the creation of nodes) but it is a simple way to, for example, create surveys or advanced contact forms and send the submittals to a person or persons via email. Unfortunately, while a Webform will display nicely using Colorbox, it will not actually function without customizing the module. Confirmation and/or validation messages are also tricky to handle within the modal itself using this method. Some developers have reported successful implementations of Webforms in a Colorbox modal but it's certainly not a straightforward option. Officially, forms in Colorbox are not supported in any version past 7.x-1.x anyway (current Colorbox version - 7.x-2.4). Rather than go down this road at all I propose two other methods. If you want to code, use CTools, this is why it exists. There are a number of excellent examples for Chaos Tools and modal forms in the wild. To dig in and figure it out yourself look to the CTools AJAX example module that ships with the CTools module. The path is under your modules directory at /ctools/ctools_ajax_sample/ctools_ajax_sample.module. The module Modal froms (with CTools) also give you the option to load a Webform using either of the two methods shown in the examples above using the path, modal_forms/nojs/webform/%node. Alternatively, a very simple way to implement forms in modals is with the aptly named Simple Dialog module. Simple Dialog implements the jQuery ui dialog plugin that ships with Drupal 7  to load pages via AJAX into a popup dialog window using just html or by implementing a supplied theme function in php. In HTML you simply need to add the class 'simple-dialog' to a link to have it display in a modal. jQuery dialog ui also accepts options to control the size of the modal, its position and whether it may be resized. For a full list of dialog option see http://jqueryui.com/demos/dialog. Any of these may be passed into the dialog via the rel tag using the format: rel="{option-name1}:{value1};{option-name2}:{value2};". To load a Webform, as with any other node you want to display, you simply need to know its path and the ID of the containing element. Example:

<a href="/path/to/target/page/to/load" name="id-of-element-on-target-page-to-load" rel="width:450;resizable:false;position:[center,60]" title="Test Webform">Modal Form</a>

If your form, or any other modal content requires JavaScipt you will need to define a new Drupal behavior  for it to function. The modal form cannot access JavaScript functions loaded using the typical jQuery $(document).ready() function since the modal doesn't exist until someone clicks the link. For more details see Managing JavaScript in Drupal 7. Or simply modify this example and have it load on the required page or on every page for the sake of simplicity: (function ($) {

   Drupal.behaviors.mymodaljs = {
    attach: function(context, settings) {
    // Modal form javascript

        $('.example', context).click(function () {
        $(this).next('ul').toggle('show');
      });
    }
  };
})(jQuery);

I hope this helps you find your way to modal joy in Drupal. Go try it out! If you have any questions or if you have a preferred alternative of your own, feel free to comment.