Modals

Modals, also known as dialogs or modal windows, are user interface elements that appear on top of the main application window. They typically have a dimmed background to draw focus to the modal itself, and often prevent users from interacting with the underlying content until the modal is closed

Examples

Default

This is the default modal, being created from markup in the body on page load by modal builder. The default modal is centered.

Fullscreen Size

The modal will fill the window

Youtube Videos Automatically Pause

If option for modal builder pauseYoutubeVideos is true (default true)

Positions

The available positions are top, bottom, left, right and center (default). Left and right are sidebard (full height), while top, bottom and center are all min height (can be configured)

Resizing

The modals setup with the builder allow resizing. Center, top and bottom modals will use the native resize handle (resize in all directions). The left/right sidebar type modals will be given a drag handle and only able to extend their width (since they already span the full screen height). To enable this behavior pass { "allowResize" : true } in builder options (data attribute)

Click Outside

By default clicking outside the modal will close it, this can be disabled by passing { "clickOutsideCloses" : false }

No Backdrop and Testing Not Preventing Scroll

Remove the backdrop by passing { "noBackdrop" : true } to the builder

Non Modal Test

Test usage with link (not recommended)

Testing behavior when the trigger is a link/anchor element. Which is not recommended for accessibility, use button. In situations where this the only option use role button, aria-haspopup dialog and empty hash for href.

Test Trigger Link