Easy To Create

Basic modal dialog Open Dialog View Code

new MUX.Dialog({
	loader: 'none',
	title: 'Basic Modal Dialog',
	content: new Element('p', {html: 'Some text.'}),
	buttons: [{
		title: 'Cancel',
		style: 'link',
		click: 'close'
	},{
		title: 'Do The Job',
		click: 'submit'
	}],
	onSubmit: function()
	{
		alert('The Job Is Done!');
		this.close();
	}
});

Basic non-modal dialogs, each click opens new one Open Dialog View Code

new MUX.Dialog({
	modal: false,
	resizable: true,
	size: {x: 400},
	loader: 'none',
	title: 'Basic Non-modal Resizable Dialog',
	content: new Element('p', {html: 'Some text.'}),
	buttons: [{
		title: 'Cancel',
		style: 'link',
		click: 'close'
	},{
		title: 'Do The Job',
		click: 'submit'
	}],
	onSubmit: function()
	{
		alert('The Job Is Done!');
		this.close();
	}
});

Lightweight informational dialog Open Dialog View Code

new MUX.Dialog({
	loader: 'none',
	showHeader: 'invisible',
	content: new Element('p', {html: 'Some text.'})
});

Easy To Customize

If you love complicated cursors Open Dialog View CSS And Code

/* Add these styles to your css file to overwrite original styles for all dialogs */
.mux-dialog-header {
	cursor: move;
}

.mux-dialog-resize-icon {
	cursor: se-resize;
}

new MUX.Dialog({
	loader: 'none',
	resizable: true,
	title: 'Styled Cursors',
	content: new Element('p', {html: 'Some text.'}),
	buttons: [{
		title: 'Cancel',
		style: 'link',
		click: 'close'
	},{
		title: 'Do The Job',
		click: 'submit'
	}],
	onOpen: function(event)
	{
		// You can also set styles for a single dialog on open.
		if (this.firstOpen)
		{
			this.box.getElement('.mux-dialog-header').setStyle('cursor', 'move');
			this.box.getElement('.mux-dialog-resize-icon').setStyle('cursor', 'se-resize');
		}
	},
	onSubmit: function()
	{
		alert('The Job Is Done!');
		this.close();
	}
});

Or maybe you prefer different style for moving dialog Open Dialog View CSS And Code

/* Add these styles to your css file to overwrite original styles for all dialogs */
.mux-dialog-box.mux-dialog-moving {
	opacity: 0.6;
	filter: alpha(opacity = 60);
}

.mux-dialog-box.mux-dialog-moving .mux-dialog-content,
.mux-dialog-box.mux-dialog-moving .mux-dialog-footer {
	visibility: hidden;
}

new MUX.Dialog({
	loader: 'none',
	title: 'Transparent While Moving',
	content: new Element('p', {html: 'Some text.'}),
	buttons: [{
		title: 'Cancel',
		style: 'link',
		click: 'close'
	},{
		title: 'Do The Job',
		click: 'submit'
	}],
	onSubmit: function()
	{
		alert('The Job Is Done!');
		this.close();
	}
});

AJAX Friendly

Load some content from a server Open Dialog View Code

new MUX.Dialog({
	loader: 'none',
	title: 'Load Content With AJAX',
	content: 'external-content.html',
	buttons: [{
		title: 'Cancel',
		style: 'link',
		click: 'close'
	},{
		title: 'Do The Job',
		click: 'submit'
	}],
	onSubmit: function()
	{
		alert('The Job Is Done!');
		this.close();
	}
});

Integrated with MUX.Loaders for nice submit visualization Open Dialog View Code

new MUX.Dialog({
	loader: 'auto',
	title: 'Smooth Closing',
	content: new Element('p', {html: 'Some text.'}),
	buttons: [{
		title: 'Cancel',
		style: 'link',
		click: 'close'
	},{
		title: 'Do The Job',
		click: 'submit'
	}],
	onSubmit: function()
	{
		this.close(2000);
	}
});