umbraco-modals
Umbraco Modals
What is it?
A modal is a popup layer that darkens the surroundings and comes with a focus lock. The modal extension type is used to configure and present dialogs and sidebars within the Umbraco backoffice. Modals can be opened via routes (for deep-linking) or at runtime using the Modal Manager Context, and they use a token-based system for type-safe communication.
Documentation
Always fetch the latest docs before implementing:
- Main docs: https://docs.umbraco.com/umbraco-cms/customizing/extending-overview/extension-types/modals
- Custom Modals: https://docs.umbraco.com/umbraco-cms/customizing/extending-overview/extension-types/modals/custom-modals
- Route Registration: https://docs.umbraco.com/umbraco-cms/customizing/extending-overview/extension-types/modals/route-registration
- Foundation: https://docs.umbraco.com/umbraco-cms/customizing/foundation
- Extension Registry: https://docs.umbraco.com/umbraco-cms/customizing/extending-overview/extension-registry
Reference Examples
The Umbraco source includes working examples:
Custom Modal Location: /Umbraco-CMS/src/Umbraco.Web.UI.Client/examples/custom-modal/
More from umbraco/umbraco-cms-backoffice-skills
umbraco-backoffice
Umbraco backoffice extension customisation - complete working examples showing how extension types combine
184umbraco-controllers
Understand and create controllers in Umbraco backoffice (foundational concept)
170umbraco-extension-template
Create new Umbraco backoffice extensions using the official dotnet template
169umbraco-dashboard
Implement dashboards in Umbraco backoffice using official docs
169umbraco-quickstart
Quick setup for Umbraco extension development - creates instance, extension, and registers it
166umbraco-property-editor-ui
Implement property editor UIs in Umbraco backoffice using official docs
164