jQuery UI

http://jqueryui.com/demos/
http://jqueryui.com/dialog/

jQuery UI Demos

---

jQuery UI offers a combination of interaction, effects, widgets, utilities, and themes designed to work well together or on their own. Play with the demos, view the source, build a theme, read the API documentation and start using jQuery UI today.

Interactions

Interactions add basic mouse-based behaviors to any element. You can create sortable lists, resizable elements, drag & drop behaviors and more with just a few lines or code. Interactions also make great building blocks for more complex widgets and applications.

• Draggable
• Droppable
• Resizable
• Selectable
• Sortable

Widgets

Widgets are full-featured UI controls that bring the richness of desktop applications to the Web. All widgets provide a solid core with plenty of extension points for customizing behavior, as well as full theming support.

• Accordion
• Autocomplete
• Button
• Datepicker
• Dialog
• Menu
• Progressbar
• Slider
• Spinner
• Tabs
• Tooltip

Effects

Effects add support for animating colors and class transitions, as well as providing several additional easings. In addition, a full suite of custom effects are available for use when showing and hiding elements or just to add some visual appeal.

• Effect
• Visibility
  • Show
  • Hide
  • Toggle
• Class Animation
  • Add Class
  • Remove Class
  • Toggle Class
  • Switch Class
• Color Animation

Utilities

Utilities used by jQuery UI to build interactions and widgets.

• Position
• Widget Factory

Dialog

---

Open content in an interactive overlay.

Examples

• Default functionality
• Animation
• Basic modal
• Modal confirmation
• Modal form
• Modal message

The basic dialog window is an overlay positioned within the viewport and is protected from page content (like select elements) shining through with an iframe. It has a title bar and a content area, and can be moved, resized and closed with the 'x' icon by default.