jQuery UI Extensions
jQuery UI Dialog Extended
Copyright 2013-2015, Felix Nagel (http://www.felixnagel.com) Dual licensed under the MIT or GPL Version 2 licenses.
This is an extension for the jQuery UI Dialog widget that adds multiple features and enhancements:
- Animated resizing and positioning
- Use content size instead of overall size when using width and height options
- Multiple viewport settings to make jQuery UI Dialog more flexible and RWD compatible
Useful for custom scripts based upon jQuery UI Dialog or as base for plugins like MultiDialog
- jQuery UI
Just add the jquery.ui.dialog.extended.js file. Make sure its included after jQuery UI (and Dialog).
// Use default way to call methods $( "#dialog" ).dialog( "width", 400 ); // or use one of the added methods $( "#dialog" ).dialog( "changeSize", 400, 200 );
This extension supports all jQuery UI Dialog options and features, including draggable and resizeable.
The following options are added to the existing options of the dialog widget:
trueClose the dialog when the overlay is clicked.
falseAlways force the dialog to be maximized. Not ratio aware.
falseResize the dialog when the window is resized. Useful for repsonsive websites.
falseReposition the dialog when the window is scrolled. Useful for repsonsive websites.
trueResizes the dialog (ratio aware) to fit the viewport. Makes sure the dialog isn't bigger as the viewport. Very useful for image galleries as its guarantees the best possible image size.
falseResizes the dialog (ratio aware) to fit the viewport. Something like a ratio aware fullscreen mode. This could increase the dialog size.
falseMake dialog's width and height option set the content size, not overall dialog size.
trueUse animation for resizing and positioning.
Please note: some options work best if you add some CSS to expand your content to full available size.
The following events are added to the existing events of the dialog widget:
- resized Called when the dialog is resized.
The following methods are added to the existing methods of the dialog widget:
change(content, width, height, animate) html, integer, integer, boolean (optional) Changes content and size of the dialog.
changeSize(width, height) Changes the size and width by using _setOptions. A shortcut. Recommended when changing both values.
setAriaLive(busy) Helper method to change ARIA live attributes.