Jump To:

  1. This is a custom title

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.

With Footer Element

Footer can be added with "footerElement" option which can be selector or an element. It will be moved into the dialog on creation. This is for dom data-attribute API usage. For inserting text or html see 'footerHtml' example below.

With Footer HTML

Footer can be added with "footerHTML" option which will populate the innerHTML of the footer element on creation.

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

Test Setting Specific labelledby/describedby

You can set these properties for custom title implementations and to add optional description information for screen readers, etc.