Skip to content


Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
jQuery UI widget extensions, check branches!

This branch is 70 commits ahead, 43 commits behind selectmenu

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.
jqueryui @ 9268634

jQuery UI Extensions

Build Status

jQuery UI Dialog Extended

Copyright 2013-2015, Felix Nagel ( 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
  • jQuery UI
    • jquery.ui.core.js
    • jquery.ui.widget.js
    • jquery.ui.dialog.js


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.

API Documentation

Available Options

The following options are added to the existing options of the dialog widget:

  • closeModalOnClick: true Close the dialog when the overlay is clicked.

  • forceFullscreen: false Always force the dialog to be maximized. Not ratio aware.

  • resizeOnWindowResize: false Resize the dialog when the window is resized. Useful for repsonsive websites.

  • scrollWithViewport: false Reposition the dialog when the window is scrolled. Useful for repsonsive websites.

  • resizeAccordingToViewport: true Resizes 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.

  • resizeToBestPossibleSize: false Resizes the dialog (ratio aware) to fit the viewport. Something like a ratio aware fullscreen mode. This could increase the dialog size.

  • useContentSize: false Make dialog's width and height option set the content size, not overall dialog size.

  • useAnimation: true Use animation for resizing and positioning.

  • animateOptions: { duration: 500, queue: false } Animation options. See: and

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.

Something went wrong with that request. Please try again.