Basic Modal Dialog

A basic modal dialog with minimal styling and without any additional settings. There are a few CSS attributes set internally by SimpleModal, however, SimpleModal relies mostly on external CSS for the look and feel.

Basic Modal Dialog

For this demo, SimpleModal is using this "hidden" data for its content. You can also populate the modal dialog with standard HTML or with DOM element(s).

Examples:

$('#basicModalContent').modal(); // jQuery object; this demo

$.modal(document.getElementById('basicModalContent')); // DOM

$.modal('<p><b>HTML</b> elements</p>'); // HTML

More details...

Contact Form

A contact form built on SimpleModal. Demonstrates the use of the onOpen, onShow and onClose callbacks, as well as the use of Ajax with SimpleModal.

Confirm Override

A modal dialog override of the JavaScript confirm function. Demonstrates the use of onShow as well as how to display a modal dialog confirmation instead of the default JavaScript confirm dialog.