Modal Windows The jQueryUI Dialog widget creates floating windows that have a title bar, a content area and are reparated and floated above other page content.

Basic example

The basic slider is horizontal and has a single handle that can be moved with the mouse or by using the arrow keys.

Dialog content here

Modals with overlays

You can also create modal windows that prevents users from interacting with the rest of the page content until it is closed. You can use the helper classes to style the overlay.

White 60% overlay
Dialog content here

Dark overlays

You can style the overlay elements using the helper classes. For example if you want to have a 80% opacity gradient red overlay you would add $('.ui-widget-overlay').addClass('gradient-red opacity-80'); in the jQuery function that created the modal window.

Dialogs with tabs

You can also put tabs inside dialogs. The tabs wrapper must have remove-border class.

Dialog with tabs
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Phasellus mattis tincidunt nibh. Cras orci urna, blandit id, pretium vel, aliquet ornare, felis. Maecenas scelerisque sem non nisl. Fusce sed lorem in enim dictum bibendum.
Nam dui erat, auctor a, dignissim quis, sollicitudin eu, felis. Pellentesque nisi urna, interdum eget, sagittis et, consequat vestibulum, lacus. Mauris porttitor ullamcorper augue.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque