MooDialog - A MooTools Dialog plugin

With this MooTools plugin you can replace the ugly alert(), promt() and confirm() dialogs by your own stylish ones!

Demo and Examples

Click here for an alert message

	new MooDialog.Alert('This is an alert message');

Click here for a confirm message

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

Click here for a prompt message

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

Click here for a error message

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

You can set a title too or customize the fx. It is recommended to set the onInitialize, onBeforeOpen and onBeforeClose options as default options of MooDialog with MooDialog.implement('options', {...});. Customized

	new MooDialog.Alert('This is a customized dialog',{
		title: 'Alert',
		onInitialize: function(wrapper){
			wrapper.setStyle('opacity', 0);
			this.fx = new Fx.Morph(wrapper, {
				duration: 600,
				transition: Fx.Transitions.Bounce.easeOut
			});
			this.overlay = new Overlay(this.options.inject, {
				duration: this.options.duration
			});
			if (this.options.closeOnOverlayClick) this.overlay.addEvent('click', this.close.bind(this));
		},
		onBeforeOpen: function(){
			this.overlay.open();
			this.fx.start({
				'margin-top': [-200, -100],
				opacity: [0, 1]
			}).chain(function(){
				this.fireEvent('show');
			}.bind(this));
		},
		onBeforeClose: function(){
			this.fx.start({
				'margin-top': [-100, 0],
				opacity: 0
			}).chain(function(){
				this.fireEvent('hide');
			}.bind(this));
			this.overlay.close();
		},
		okText: 'It is really cool indeed!'
	});

Create a Dialog from an Element: This element will get into the Dialog

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

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

Are you sure you want to delete this quick link

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

Confirm form submit

	$('formId').confirmFormSubmit('Are you sure you want to submit this form');

MooTools.net in an IFrame

	new MooDialog.IFrame('http://www.mootools.net', {
		title: 'MooTools.net',
		'class': 'MooDialog myDialog'
	});

Get Content by a Ajax Request (needs the Request.HTML object)

	var i = 1;
	var reqDialog = new MooDialog.Request('requestDemoText.php', null, {
		'class': 'MooDialog myDialog',
		autoOpen: false,
		onContentChange: function(){
			$('result').set('text', 'The content event has fired ' + (i++) +' times');
		}
	});
	// You want the request dialog instance to set the onRequest message, so you have to do it in two steps.
	reqDialog.setRequestOptions({
		onRequest: function(){
			reqDialog.setContent('loading...');
		}
	}).open();

Docs

Download