jquery.fancydialog.js

Version 0.1

Overview

jquery.fancydialog.js is a wrapper around jquery.fancybox.js
that provides an interface for using iframes as modal dialogs, with mechanisms for
two-way communication.

Using iframes allows for complex, multi-step dialog logic, while the mechanisms
for two-way communication make it easy to pass information and state back and
forth between the calling page and the dialog.

Basic Example

The following will show a dialog displaying dialog.html and will alert
the result:

$.fancydialog('dialog.html', {
    onDialogComplete: function(response) { alert('Dialog returned: '+response); },
    onDialogCancel: function() { alert('Dialog was cancelled'); }
});

Showing Dialogs

Like fancybox, you can apply a fancydialog to elements via a selector:

$('a.modal').fancydialog(options);

In this usage, the href attribute of the element will determine the source
of the initial dialog page.

You can also manually trigger a fancydialog:

$.fancydialog(dialog_url, options);

In this case, the dialog_url parameter controls the initial dialog page.

The options are the same as for fancybox with the following exceptions:

• type is always set to iframe
• overlayShow defaults to true
• hideOnOverlayClick defaults to false
• hideOnContentClick defaults to false
• padding defaults to 0
• titleShow defaults to false

Additionally, there are three new options:

• onDialogComplete
• onDialogCancel

When the dialog completes and returns a value (see below), the
onDialogComplete is called, with the dialog's response data passed into
it. The response data can be any data or object that the dialog wished to
return.

If the user cancels the dialog by closing it via the fancybox close UI, or
if the dialog programatically cancels itself (see below), then the
onDialogCancel callback.

Implementing Dialogs

When a fancydialog's workflow is complete, it will need to return a value
to the calling page. This is done with the following API:

$.fancydialog.complete(response);

The value for response can be any object or value. Calling this will close
the dialog on the calling window and fire the onDialogComplete callback
with the given return value.

If the user closes the dialog via the fancybox close button UI, or if the
dialog wants to programatically cancels itself (such as to handle a cancel
button embedded within the dialog's HTML), it can do so by calling:

$.fancydialog.cancel();

Again, this will close the dialog in the parent window and will fire
the onDialogCancel callback.

This can also be called by the parent window, which will cancel the currently
active dialog.

Communicating from the parent to the dialog

The parent can send a signal to a dialog via:

$.fancydialog.send(data);

The dialog can listen for the custom event dialogSignal which will be
triggered when the parent sends to the dialog:

$(document).bind('dialogSignal', function(event, data) {
    alert('Message from Ground Control: '+data);
});