4.0
Rating: 4.0/5 (2 votes)

Dialog

A dialog window that allows you to open modal dialog windows on a web page with arbitrary HTML content.

Demo

Source Example

<html> <head> <script language="javascript" src="protoplasm.js"></script> <script language="javascript"> Protoplasm.use('dialog'); function showDialog() { new Dialog.Frame('Test Dialog', 'This is a test dialog').show(); } </script> </head> <body> <input type="button" value="Show Dialog" onclick="showDialog()" /> </body> </html>

Usage

To create and display a new dialog window:

// Unstyled dialog var d = new Dialog.HTML(content[, options]); // Dialog with default window frame styling var d = new Dialog.Frame(title, content[, options]); // Unstyled dialog with contents fetched from a remote URL var d = new Dialog.Ajax(url[, options]); // Display the dialog onscreen d.show();

Dialog.HTML Parameters:

Parameter Required Description
content yes A DOM element or HTML string specifying the contents of the dialog
options no An object (hash) containing name/value pairs of additional options.

Available options:
width The width of the dialog, in pixels.
height The height of the dialog, in pixels.
ignoreClicks Ignore clicks outside the dialog (default: outsides clicks close the dialog)
ignoreEsc Ignore the ESC key (default: ESC closes the dialog)
dialogClass The CSS class name to add to the dialog's main window.
onClose Callback when the dialog is closed.
onSuccess Callback when the dialog completes successfully.
onFailure Callback when the dialog completes unsuccessfully.

Dialog.Frame Parameters:

Parameter Required Description
title yes A string specifying the dialog's title
content yes A DOM element or HTML string specifying the contents of the dialog
options no An object (hash) containing name/value pairs of additional options.

See Dialog.HTML above for common options

Dialog.Ajax Parameters:

Parameter Required Description
url yes The URL to fetch the contents of the dialog from.
options no An object (hash) containing name/value pairs of additional options.

See Dialog.HTML above for common options

Additional options:
loadingIcon The loading image to display while waiting for contents.

For more details, see the API documentation for Dialog.