jQuery Doom Windows Plugin – Simple Javascript Dialogs

• Demo
• Download
• Source
• jQuery page

Looking for a tiny modal dialogs library? Then this one is for you.

Doom Windows is easy to style, configure and extend. It also has a couple of shortcut functions that make it easy to use.

Display modal dialogs, confirm windows and alerts in one line of code: dAlert(‘Error!’), dConfirm(‘Are you sure?’), dWindow(‘<p>Text</p>’).

I created this plugin because I wanted to get rid of jQuery UI in my projects as it was too big and slow.

Easy steps to include the plugin:

1. Include the doom_windows_style.css style
2. Include the jquery.doomWindows.js file
3. Make windows: dWindow(‘<img src=”http://maps.google.com/maps/api/staticmap?center=40.714728,-73.998672&zoom=14&size=400×400&sensor=false” alt=”Google Maps” width=”400″ height=”400″ />’)

Implementation examples

Display Google Maps in a separate dialog:

$('#view-map-bt').click(function () {
	dWindow('<img src="http://maps.google.com/maps/api/staticmap?center=40.714728,-73.998672&zoom=14&size=400x400&sensor=false"
 alt="Google Maps" width="400" height="400" />');
});

//or:

$('#view-map-bt').click(function () {
	$('<img src="http://maps.google.com/maps/api/staticmap?center=40.714728,-73.998672&zoom=14&size=400x400&sensor=false"
 alt="Google Maps" width="400" height="400" />').doomWindows({buttons:false, buttonClick: function (btType, win) {btType === 'close' && win.close();}});
});

Confirm modal box:

$('#view-map-bt').click(function () {
	dConfirm('Are you sure you want to delete this item?', function (btType, win) {
		(btType === 'no' || btType === 'close') && win.close();
		if (btType === 'yes') {
			// some ajax to delete item here
			win.close();
			dAlert('Item deleted!');
		}
	});
});

Alert modal:

$('#alert-bt').click(function () {
	dAlert('Omg! A fake error occured! Do not panic!');
});

Load remote content with Ajax:

$('#remote-bt').click(function () {
	dWindow(false, {
		ajaxUrl: $(this).attr('href'),
		cacheAjaxResult: true,
		wrapperId: 'log-in-window',
		minHeight: 317,
		minWidth: 430
	});
	return false;
});

Please check out for more examples on the DEMO page.

Advanced options that can be set:

styles ({position: ‘absolute’, ‘z-index’: 999, top: false, left: false}):

Window default styles.

width (‘auto’):

Set up a custom width of the window.

height (‘auto’):

Set up a custom height of the window.

minWidth (‘auto’):

Set up a custom min-width style.

minHeight (‘auto’):

Set up a custom min-height style.

overlay: (true):

Show or hide window overlay.

wrapp: (true):

Buy default the content is wrapped in a div of ‘doom-win’ class.

wrapperClass (‘doom-win’):

Set the deafult wrapper class.

wrapperId (false):

Give a unique id to your window so it’s easier to style it.

wrapperHtml (‘<div><div class=”doom-win-content”></div></div>’):

Set up a custom html window wrapper.

buttons ({ok:’Ok’}):

Bottom buttons and button text.

headerButtons ({close:’Close’}):

Header buttons and button text.

buttonsTranslate ([]):

Text translate for buttons.

buttonsTranslate (‘<div class=”doom-win-bt-cnt-header”><ul class=”doom-win-bt-list”>{buttons}</ul></div>’):

Header buttons html wrapper structure.

buttonsWrapperHtml (‘<div class=”doom-win-bt-cnt”><ul class=”doom-win-bt-list”>{buttons}</ul></div>’):

Bottom buttons html wrapper structure.

buttonHtml (‘<li class=”doom-win-bt-{buttonType}”><button data-type=”{buttonType}”><span>{buttonText}</span></button></li>’):

Message button HTML structure.

buttonClick (null):

A callback function when for all the buttons. Get the buttons key (ok, close, yes, no) and the window object as args. I.e.: function (btType, win) {btType === ‘close’ && win.close();}

closeOnEsc (true):

Close window on Escape keyboard button click.

ajaxUrl (null):

Set the ajax url if you want to load content remotely.

afterAjax (null):

After ajax callback function. Gets the ajax response as arg.

ajaxData (null):

Set some custome request query params for ajax.

cacheAjaxResult (false):

Set this if you want the ajax content to be cached in the browser.

onShow (null):

Callback function after the window is created and displayed.

Please support this free plugin developement and

• Demo
• Download
• Source
• jQuery page