The following demos are intended to illustrate the flexibility of SimpleModal.
Note: The Contact Form demo needs to be run from a web server and requires PHP.
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
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.
OSX Style Dialog
A modal dialog configured to behave like an OSX dialog. Demonstrates the use of the onOpen and onClose callbacks as well as a handful of options, and custom styling.
Inspired by ModalBox, an OSX style dialog built with prototype.
Hello!
SimpleModal gives you the flexibility to build whatever you can envision, while shielding you from related cross-browser issues inherent with UI development.
As you can see by this example, SimpleModal can be easily configured to behave like an OSX dialog. With a handful options, 2 custom callbacks and some styling, you have a visually appealing dialog that is ready to use!
(or press ESC or click the overlay)
Flickr Badge Viewer
A modal dialog configured to display images. Demonstrates the use of the onOpen and onClose callbacks as well as a handful of options, and custom styling.
The viewer also includes keyboard navigation; Previous: p or ←, Next: n or →, Close Viewer: ESC.
To demo this, click on one of the Flickr thumbnails in the footer of this page
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.