MooDialog is a MooTools plugin to replace the native alert(), confirm() and promt() javascript functions by more stylish ones. You can use it also for other DOM elements, create an IFrame dialog or even create an Ajax Dialog.
MooDialog is a MooTools plugin to replace the native alert(), confirm() and promt() javascript functions by more stylish ones. You can use it also for other DOM elements, create an IFrame dialog or even create an Ajax Dialog
As of version 0.7 MooDialog uses MooTools 1.3 and is not compatible with MooTools 1.2.
First you have to include the javascript files and css file in the head of your html document.
#HTML
<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
#HTML
<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:
#HTML
<script src="../Source/Overlay.js" type="text/javascript"></script>
<script src="../Source/MooDialog.Fx" type="text/javascript"></script>
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
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.
#JS
var dialog = new MooDialog([options]);
In every last parameter you can set the following options.
MooDialog
) A CSS classname which you can set to style the dialogtrue
) This will use the scroll
event to simulate the position: fixed
css property in IE6false
) This will force other browsers to use the scroll
window event.true
) Use the esc key to close the dialogtrue
) Fire the MooDialog.dispose() method after closing the dialog to dispose the dialog from the DOMfalse
) This will automatically open the dialog for the Alert, Confirm, Error, IFrame, Prompt and Request subclassestrue
) Should it diplay a close buttonWith this method you can set the content of the dialog.
#JS
dialog.setContent(arg1[, arg2, arg3, ...]);
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.
#JS
dialog.open();
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.
#JS
dialog.close();
Removes the dialog from the DOM
#JS
dialog.destroy();
This method returns the dialog wrapper element
#JS
var myDialog = new MooDialog();
$(myDialog);
Create a dialog from an element
#JS
new Element('div',{text: 'This is a custom element'}).MooDialog([options]);
// Or an existing element from the DOM
$('el').MooDialog();
Create a alert dialog, a replacement for alert()
#HTML
<script src="../Source/MooDialog.Alert.js" type="text/javascript"></script>
Javascript
#JS
new MooDialog.Alert(message[, options]);
// example
new MooDialog.Alert('Hi there!');
Ok
) The text for the OK buttontrue
) If true, the OK button will focus when the dialog shows.MooDialogAlert
) The CSS Classname of the paragraph element containing the textCreate a confirm dialog, a replacement for confirm()
#HTML
<script src="../Source/MooDialog.Confirm.js" type="text/javascript"></script>
Javascript
#JS
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');
});
Ok
) The text for the OK buttonCancel
) The text of the Cancel buttontrue
) If true, the Cancel button will focus when the dialog shows.MooDialogConfirm
) The CSS Classname of the paragraph element containing the textCreate a confirm dialog if the user really want to follow this link
#JS
$('confirmDelete').confirmLinkClick('Are you sure you want to click this link');
Create a confirm dialog if the user try to submit a form
#JS
document.getElement('form#myForm').confirmFormSubmit('Do you want to submit this form');'
Create an prompt dialog, replacement for prompt()
#HTML
<script src="../Source/MooDialog.Prompt.js" type="text/javascript"></script>
Javascript
#JS
new MooDialog.Prompt(message[, fn, options]);
// Example
new MooDialog.Prompt('What is your name?', function(ret){
new MooDialog.Alert('Your name is ' + ret);
});
Ok
) The text for the OK buttontrue
) If true, the input field will focus when the dialog shows.MooDialogPrompt
) The CSS Classname of the paragraph element containing the textCreate an error message
#HTML
<script src="../Source/MooDialog.Error.js" type="text/javascript"></script>
Javascript
#JS
new MooDialog.Error(message);
// Example
new MooDialog.Error('O No, What have you done!?');
Ok
) The text for the OK buttontrue
) If true, the OK button will focus when the dialog shows.MooDialogError
) The CSS Classname of the paragraph element containing the textCreate a dialog with an IFrame
#JS
new MooDialog.IFrame(url[, options]);
// Example
new MooDialog.IFrame('http://www.mootools.net');
true
) If the scrolling
attribute of the IFrame should be auto
or no
Get the dialog content by a Ajax Request
#HTML
<script src="../Source/MooDialog.Request.js" type="text/javascript"></script>
Javascript
#JS
new MooDialog.Request(url[, RequestOptions, options]);
// Example
new MooDialog.Request('exampleText.html');
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.
#JS
var dialog = new MooDialog.Request('exampleText.html');
dialog.setRequestOptions({
onRequest: function(){
dialog.setContent('loading...');
}
});