SimpleModal Tests

Chained Function - default options
```
$('#modalContentTest').modal();
```
Modal Function w/ jQuery DOM attached element - default options
```
$.modal($('#modalContentTest'));
```
Chained Function w/ jQuery DOM unattached element - default options
```
$('<div><h1>New DOM Element</h1></div>').modal();
```

Modal Function w/ DOM element - default options

$.modal(document.getElementById('modalContentTest'));

Modal Function w/ HTML - default options

$.modal("<div class='test'>\
		<h1>Sample Content</h1>\
		<p>This can be complex HTML containing <a href='#'>links</a>,\
		<input type='text' value='input boxes' size='8'/>, etc...</p>\
	 </div>");

Modal Function w/ string - default options

$.modal("Sample Content - just a plain 'ol string");

Modal Function w/ string/HTML - close: false

$.modal("<div class='test'>\
		<h1>Sample Content</h1>\
		<p>This example uses a custom close.</p>\
		<p><a href='#' class='simplemodal-close'>Close</a></p>\
	 </div>", {close: false});

Chained Function w/ DOM element - persist: true

$('#modalContentPersistTest').modal({persist: true});

onOpen callback function - onOpen: function

$('#modalContentTest').modal({onOpen: modalOpen});

/**
 * When the open event is called, this function will be used to 'open'
 * the overlay, container and data portions of the modal dialog.
 *
 * onOpen callbacks need to handle 'opening' the overlay, container
 * and data.
 */
function modalOpen (dialog) {
	dialog.overlay.fadeIn('slow', function () {
		dialog.container.fadeIn('slow', function () {
			dialog.data.hide().slideDown('slow');	 
		});
	});
}

onClose callback function - onClose: function

$('#modalContentTest').modal({onClose: simplemodal-close});

/**
 * When the close event is called, this function will be used to 'close'
 * the overlay, container and data portions of the modal dialog.
 *
 * The SimpleModal close function will still perform some actions that
 * don't need to be handled here.
 *
 * onClose callbacks need to handle 'closing' the overlay, container
 * and data.
 */
function simplemodal-close (dialog) {
	dialog.data.fadeOut('slow', function () {
		dialog.container.hide('slow', function () {
			dialog.overlay.slideUp('slow', function () {
				$.modal.close();
			});
		});
	});
}

onShow callback function - onShow: function

$('#modalContentTest').modal({onShow: modalShow});

/**
 * After the dialog is show, this callback will bind some effects
 * to the data when the 'button' button is clicked.
 *
 * This callback is completely user based; SimpleModal does not have
 * a matching function.
 */
function modalShow (dialog) {
	$('input.animate').one('click', function () {
		dialog.data.slideUp('slow', function () {
			dialog.data.slideDown('slow');
		});
	});
}

IE SELECT bleed test
Make sure the select options do not bleed through the modal dialog.

Position test (both) - position: [20,20]

$('#modalContentTest').modal({position: [20,20]});

Position test (top only) - position: [20,]

$('#modalContentTest').modal({position: [20,]});

Position test (left only) - position: [,20]

$('#modalContentTest').modal({position: [,20]});

Position test (px) - position: ["40px","40px"]

$('#modalContentTest').modal({position: ["40px","40px"]});

Position test (%) - position: ["25%","25%"]

$('#modalContentTest').modal({position: ["25%","25%"]});

Horizontal test
```
$('#modalContentTest').modal();
```
Wide Content - test horizontal scrolling
Doctypes: