Modal Windows

Developer Notes

The modal window classes consist of a container (ux-modl) that houses a header (ux-modl-header), content (ux-modl-content), and a button container (ux-modl-buttons). You can adjust the width of the window by placing one of the ux-width-nt utility classes on the container. For example: <div class="ux-modl ux-width-26t">

You can position the modal relative to the screen by placing it after the wrapper div (ux-wrapper), or relative to an element by enclosing both the modal and the element in a span of class ux-modl-anchor. You can then position the modal above (ux-modl-anchor-above) or below (ux-modl-anchor-below) and left-aligned (ux-modl-anchor-left) or right-aligned (ux-modl-anchor-right).

Here's an example of one that is above and left-aligned

Close

Positioning Example

This modal window is above and left-aligned relative to the link.

.