MultiDialog

MultiDialog utilizes jQuery UI Dialog for a full featured Modalbox / Lightbox application.
It's flexible, easy to use but yet extendable and fits great into the jQuery UI Widget family.

• Use any jQuery selector or a powerful API
• Feature rich, very flexible and easy to extend
• Tested in Firefox, Chrome, Safari & IE8+
• Built with a11y and RWD in mind

DialogBox works with Images, AJAX content, iframes, You Tube video, Vimeo video and inline content (anchor links) and plain HTML. Custom content types are easy to implement.

jQuery UI Dialog features, See full feature list

• Themes
• Overlay
• Configurable show / hide animation
• Configurable positioning
• jQuery UI Button support
• Draggable and resizable

MutliDialog features

• Image, AJAX, iframe, HTML, YouTube & Vimeo support
• Gallery mode with loop
• Keyboard support
• Dialog size will adjust to viewport if needed ("responsive")
• ARIA attributes
• Templates for content types
• Set content type, width and height with GetVars
• Content description (supports HTML)
• Configure description and title by content type
• Powerful API
• Configurable loading handling
• Configurable error handling
• Callback events
• ...and much more!

Please see source for all options.

MutliDialog depends on the following jQuery / UI components.

/* Depends:
 *  jquery.js
 *	jquery.ui.core.js
 *	jquery.ui.widget.js
 *	jquery.ui.position.js
 *	jquery.ui.dialog.js
 *	jquery.ui.dialog.extended.js
 *	jquery.ui.effects-fade.js
 *
 * Optional (Dialog related)
 *  jquery.ui.button.js
 *	jquery.ui.resizable.js
 *	jquery.ui.draggable.js
 */

Go to jQueryUi.com to built your own jQuery UI file!

Add source files:

<!-- jQuery & jQuery UI files (needed)-->
<link rel="stylesheet" href="css/jquery-ui-1.10.3.custom.css">
<script src="js/jquery/jquery-1.9.1.js"></script>
<script src="js/jquery/jquery-ui-1.10.3.custom.js"></script>

<!-- MultiDialog files (needed) -->
<link rel="stylesheet" href="css/jquery.multiDialog.css">
<script src="js/jquery.ui.dialog.extended.js"></script>
<script src="js/jquery.multiDialog.js"></script>

Add links

<a class="multidialog" href="#somelink">Some Link</a>

Init plugin

// use any jQuery selector
$( "a.multidialog" ).MultiDialog();

$("a.multidialog").MultiDialog({
	// set options here
});