Modal

The Modal component lets you show important, additional content in an overlay.

OverviewPropertiesUsageChangelog3.14.0

Changes to Modal. The full components changelog also lists package-wide and cross-cutting entries.

3.11.3

Updates

• Fixed an issue where it sometimes took the modal several seconds to become visible in Chrome when running inside an iframe. (APPDEV-19352)

3.10.0

Updates

• Fixed scrolling inside the modal from propagating to the page body. (APPDEV-18048)

3.9.0

Updates

Overlays

• Reduce Modal and Sheet horizontal padding to 16px on mobile viewports (APPDEV-18055)

3.7.0

Updates

• Fixed nested-overlay focus race where opening an overlay from inside another overlay (e.g. a Modal opened from a Menu inside a Sheet) could leave focus on the outer trigger. FocusScope now tracks active contain scopes on a stack so only the topmost scope owns focus, focus that escapes the top scope is pulled back into it when the new target lives in another registered scope, and inertness is reference-counted so an inner scope unmounting no longer clears the outer scope's inert state. Focus moving into a non-FocusScope sibling portal (e.g. a Menu opened inside a Modal) is left alone, so the nested overlay's interactions are no longer interrupted. (APPDEV-17567)

3.2.0

Updates

• Added data-dt-name attribute to the close button. (APPDEV-16671)