Create Modal | stat.modal.create(args);

args object
* type: dialog, confirm, loading, message (default)
* style: default, error, success, alert, money, print, download
* title: 'string'
* body: ['lorem ipsum', 'second paragraph']
* buttons: [{title: 'foo', href: 'https://...' style: 'submit', callback: callbackTest},...]
* dismissable: bool (default: true)

Tip: Adding 'href' to the 'buttons' object turns button into an Anchor Tag

Tip: Adding 'destroy' to the 'buttons' callback will make that button close the modal

Arguments for Modal:

var args = {
	type: "dialog",
	title: "This is the Title",
	style: "download",
	body: ["Hello World", "Line two text"],
	buttons: [{title: 'bar', style: 'back', callback: 'destroy'},{title: 'foo', style: 'submit', callback: callbackTest}],
	dismissable: true
}

Example Callback Function:

var callbackTest = function(e) {
	alert('callback: you clicked ' + e.target.id);
}

Create Modal:

stat.modal.create(args);

Run This

NOTE: The click event gets applied to the button Callback

Blackout Overlay Modal

Args:

var args_fulloverlay = {
	type: "dialog",
	style: "alert",
	title: "Check this out!",
	overlay: "blackout",
	body: ["PEW PEW!"],
	dismissable: true
}

Avail Overlays: default || darker || blackout

Create Modal:

stat.modal.create(args_fulloverlay);

Run This

Loading Modals

Arguments for 'Loading Modal':

var args_loading = {
	type: "loading",
	title: "Loading, Please Wait",
	overlay: "darker",
	dismissable: true
}

Tip: Set 'dismissible' to false to prevent user from closing loading modal until action is complete.

Create Modal:

stat.modal.create(args_loading);

Run This

Destroy Modal | stat.modal.destroy();

Removes ALL Modals from DOM

example destroy:

stat.modal.destroy();

Modal Display Options | stat.modal.display(option, modal);

Show or Hide Modals from DOM

example hide:

stat.modal.display(hide);

Modal HTML

<div class="modal error" role="dialog">
	<div class="modal-header">
		<h4>Modal Title </h4>
		<button class="modal-close">Close</button>
	</div>
	<div class="modal-body">
		<p>Message body</p>
	</div>
	<div class="modal-footer">
		<button type="button" class="btn back">Cancel</button>
		<button type="button" class="btn submit">Save</button>
	</div>
</div>
<div class="modal-overlay"></div>