Sometimes you just want a little bit of html to appear in a popup-style dialog window without having to write a bunch of Javascript. This module provides a simple method to load pages via AJAX into a popup dialog window using just html (or by implementing a supplied theme function in php).

Simple Dialog implements the jquery ui dialog plugin that is provided with Drupal 7.

HOW IT WORKS

Dialog windows are triggered by links (anchor tags) that have been given a special class, as well as a little extra information within the attributes of the link:
- The "href" attribute specifies the target page to load into the dialog
- The "name" attribute specifies the unique id of the container on the target page to load
- The "rel" attribute specifies any custom settings for the dialog window
- The "title" attribute will be used for the Dialog window title (this can also be specified as a setting in the "rel" attribute as well)
The element from the target page (selected using the specified id) is then requested using the jquery .get() function
Theming is simplified by not loading the entire target page. You won't have to make new templates that strip out everything but the content area just to load it in a dialog window

A more detailed description of how to implement Simple Dialog is below.

CONFIGURATION

The configuration page is at admin/config/content/simple-dialog.

There is only one configuration option: Add simple dialog javascript files to all pages.

By Default this option is selected. This option is here in case you're trying to limit the amount of data loaded on each page load. If you're not worried about that you can probably just leave this enabled. A couple things to note if you disable this setting:

You will need to add the javascript files to the page manually if you want to implement the "simple-dialog" class method.
If you are adding simple dialog links to the page using theme('simple_dialog'...), the necessary javascript is added within those functions so you should be okay.

JAVASCRIPT

This module does not bring javascript files over from the target page. If your target html needs javascript to work, You will need to make sure your javascript is either inline in the html that's being loaded, or in the head tag of the page you are on.

HTML Implementation

Add the class 'simple-dialog' to open links in a dialog You also need to specify 'name="{selector}"' where the {selector} is the unique id of the container to load from the linked page. Any additional jquery ui dialog options can be passed through the rel tag using the format:

rel="{option-name1}:{value1};{option-name2}:{value2};"

NOTE: For the position option, if you want to pass in an array of xy values, use the syntax [{x},{y}] with no quotes or spaces.

example:

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

The available jquery ui dialog options can be found here:

http://jqueryui.com/demos/dialog

THEME Function Implementation

You can also implement a simple dialog link using the theme function: theme('simple_dialog_link', $args) where $args contains the following values:

      array(
        // required
        'text' => 'My Link Text',
        'path' => 'path/to/target/page/to/load',
        'selector' => 'id-of-element-on-target-page-to-load',
        'title' => 'Modal Frame Title',
        // optional
        'options' => array(
          'optionName' => 'optionValue', // examples:
          'width' => 900,
          'resizable' => FALSE,
          'position' => 'center', // Position can be a string or:
          'position' => array(60, 'top') // can be an array of xy values
        ),
        'class' => array('class-name-1', 'class-name-2'),
      );

For the 'position' option, the value can be a string or an array of xy values. Per the jquery ui dialog documentation at
http://jqueryui.com/demos/dialog/#option-position:

Specifies where the dialog should be displayed. Possible values:

a single string representing position within viewport: "center", "left", "right", "top", "bottom".
an array containing an x,y coordinate pair in pixel offset from left, top corner of viewport (e.g. array(350,100))
an array containing x,y position string values (e.g. array("right","top") for top right corner).

Development sponsored by: Fuse Interactive

Simple Dialog

Issues

Simple Dialog box not displaying the actual color of the element inside itClosed: duplicateUser interface Created over 9 years ago

Simple Dialog box not displaying the actual color of the element inside it
Closed: duplicate
User interface
Created over 9 years ago