How to use

First you have to include the javascript files and css file in the head of your html document.

<link  href="../Source/css/MooDialog.css" rel="stylesheet" type="text/css" media="screen" />
<script src="../Source/MooDialog.js" type="text/javascript"></script>

And depending on the functionality you want you use, you have to include, for example, the following files

<script src="../Source/MooDialog.Alert.js" type="text/javascript"></script>
<script src="../Source/MooDialog.Request.js" type="text/javascript"></script>

If you want to use the standard fancy fade-in and fade-out effects, you should include Overlay.js and MooDialog.Fx.js in your page:

<script src="../Source/Overlay.js" type="text/javascript"></script>
<script src="../Source/MooDialog.Fx" type="text/javascript"></script>

Packager

MooDialog is packager ready. This means you can build MooDialog to a single file with

Build via Packager (ty cpojer)

./packager register /path/to/MooDialog
./packager build MooDialog/* > MooDialog.js

To build this plugin without external dependencies use

./packager build MooDialog/* +use-only MooDialog > MooDialog.js

CSS

MooDialog does not style any element with JavaScript, but only uses CSS. The Element.setStyle method is only used to show and hide the dialog.

You can use the class option to use your own styles, or change the MooDialog.css file.

Class Moodialog

Constructor

var dialog = new MooDialog([options]);

Arguments

1. options: (object) See the options section.

Options

In every last parameter you can set the following options.

• class: (string, defaults to MooDialog) A CSS classname which you can set to style the dialog
• title: (string, optional) The title of the Dialog. This will appear at the top of the dialog
• scroll: (boolean, defaults to true) This will use the scroll event to simulate the position: fixed css property in IE6
• forceScroll: (boolean, defaults to false) This will force other browsers to use the scroll window event.
• useEscKey: (boolean, defaults to true) Use the esc key to close the dialog
• destroyOnClose: (boolean, defaults to true) Fire the MooDialog.dispose() method after closing the dialog to dispose the dialog from the DOM
• autoOpen: (boolean, defaults to false) This will automatically open the dialog for the Alert, Confirm, Error, IFrame, Prompt and Request subclasses
• closeButton: (boolean, defaults to true) Should it diplay a close button

Events

• initialize: Fires when MooDialog has initialize. This event is usefull when you want to create your own effects for the dialog, in combination with the beforeOpen and beforeClose events.
• beforeOpen: Fires before the dialog opens. You can overwrite this default event to change the behavior how the dialog opens.
• open: When the dialog gets opend
• show: When the dialog is totally opened
• beforeClose: Fires before the dialog closes. You can overwrite this default event to change the behavior how the dialog closes.
• close: When the dialog gets closed
• hide: When the dialog is totally hidden
• contentChange: Fires when the content has changed. Especially useful with the MooDialog.Request class.

MooDialog method: setContent

With this method you can set the content of the dialog.

Syntax

dialog.setContent(arg1[, arg2, arg3, ...]);

Arguments

1. content: (string, number, element, elements, array) If a string or number is passed as first argument, it will set the text of the dialog. If (multiple) elements are passed, it will adopt them into the dialog

Return

• MooDialog instance

MooDialog method: open

With this method you open the dialog. It will fire the beforeOpen and open events. It will fire the show event if the dialog is actually opened.

dialog.open();

MooDialog method: close

With this method you close the dialog. It will fire the beforeClos and close events. If the dialog is actually closed, it will fire the hide event.

dialog.close();

MooDialog method: destroy

Removes the dialog from the DOM

dialog.destroy();

MooDialog method: toElement

This method returns the dialog wrapper element

var myDialog = new MooDialog();
$(myDialog);

Element method: MooDialog

Create a dialog from an element

new Element('div',{text: 'This is a custom element'}).MooDialog([options]);

// Or an existing element from the DOM
$('el').MooDialog();

Class Moodialog Alert

Create a alert dialog, a replacement for alert()

<script src="../Source/MooDialog.Alert.js" type="text/javascript"></script>

Javascript

new MooDialog.Alert(message[, options]);

// example
new MooDialog.Alert('Hi there!');

Options

1. okText: (string, defaults to Ok) The text for the OK button
2. focus: (boolean, defaults to true) If true, the OK button will focus when the dialog shows.
3. textPClass: (string, defaults to MooDialogAlert) The CSS Classname of the paragraph element containing the text

Class Moodialog Confirm

Create a confirm dialog, a replacement for confirm()

<script src="../Source/MooDialog.Confirm.js" type="text/javascript"></script>

Javascript

new MooDialog.Confirm(message[, fn1, fn2, options]);

// Examaple
new MooDialog.Confirm('Are you sure you want to do this?', function(){
    new MooDialog.Alert('You are!')
}, function(){
    new MooDialog.Alert('You are not');
});

Options

1. okText: (string, defaults to Ok) The text for the OK button
2. cancelText: (string, defaults to Cancel) The text of the Cancel button
3. focus: (boolean, defaults to true) If true, the Cancel button will focus when the dialog shows.
4. textPClass: (string, defaults to MooDialogConfirm) The CSS Classname of the paragraph element containing the text

Element method: confirmLinkClick

Create a confirm dialog if the user really want to follow this link

$('confirmDelete').confirmLinkClick('Are you sure you want to click this link');

Element method: confirmFormSubmit

Create a confirm dialog if the user try to submit a form

document.getElement('form#myForm').confirmFormSubmit('Do you want to submit this form');'

Class Moodialog Prompt

Create an prompt dialog, replacement for prompt()

<script src="../Source/MooDialog.Prompt.js" type="text/javascript"></script>

Javascript

new MooDialog.Prompt(message[, fn, options]);

// Example
new MooDialog.Prompt('What is your name?', function(ret){
    new MooDialog.Alert('Your name is ' + ret);
});

Options

1. okText: (string, defaults to Ok) The text for the OK button
2. focus: (boolean, defaults to true) If true, the input field will focus when the dialog shows.
3. textPClass: (string, defaults to MooDialogPrompt) The CSS Classname of the paragraph element containing the text
4. defaultValue: (string) The default value of the input field

Class Moodialog Error

Create an error message

<script src="../Source/MooDialog.Error.js" type="text/javascript"></script>

Javascript

new MooDialog.Error(message);

// Example
new MooDialog.Error('O No, What have you done!?');

Options

1. okText: (string, defaults to Ok) The text for the OK button
2. focus: (boolean, defaults to true) If true, the OK button will focus when the dialog shows.
3. textPClass: (string, defaults to MooDialogError) The CSS Classname of the paragraph element containing the text

Class Moodialog Iframe

Create a dialog with an IFrame

new MooDialog.IFrame(url[, options]);

// Example
new MooDialog.IFrame('http://www.mootools.net');

Options

1. useScrollBar: (boolean, defaults to true) If the scrolling attribute of the IFrame should be auto or no

Class Moodialog Request

Get the dialog content by a Ajax Request

<script src="../Source/MooDialog.Request.js" type="text/javascript"></script>

Javascript

new MooDialog.Request(url[, RequestOptions, options]);

// Example
new MooDialog.Request('exampleText.html');

MooDialog.Request method: setRequestOptions

Because you cannot refer to the dialog instance if you put the requestopions as second argument, this is a separate method to set them. This helps you to change the content of the dialog on for example the onRequest event of Request.

var dialog = new MooDialog.Request('exampleText.html');
dialog.setRequestOptions({
    onRequest: function(){
        dialog.setContent('loading...');
    }
});

Requirements

• MooTools Core 1.3
• Overlay (included by default)

Discuss

A note on comments here: These comments are moderated. No comments will show up until they are approved. Comments that are not productive (i.e. inflammatory, rude, etc) will not be approved.

Found a bug in this plugin? Please report it this repository's Github Issues.