Simple Dialog

Primary tabs

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).

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.