Last updated
Was this helpful?
Last updated
Was this helpful?
The Dialog modal appears in the middle of the screen and the Sidebar Modal slides in from the right.
A modal can be opened in two ways: either directly at runtime or by registering a route for the modal. Registering a route allows deep-linking to the modal, which may be preferred in certain scenarios. Otherwise, opening the modal directly is a simpler option.
The Promise returned by umbOpenModal
is handled for potential rejection. This occurs when the Model is closed without submitting. Use this behavior to carry out a certain action if the modal is cancelled. In this case, undefined
is returned when the Modal is cancelled (rejected).
For full control, open a modal via the Modal Manager Context. This is what the Open Modal method uses behind the scenes. Using the context directly gives you a bit more control and understanding of the system.
First, consume the UMB_MODAL_MANAGER_CONTEXT
, then use the modal manager context to open a modal. The following example shows how to consume the Modal Manager Context:
In this case, the modal token from the previous example is used. It accepts a key as input data and returns the new key if the modal is submitted.
You can register modals with a route, making it possible to link directly to that specific modal. This also means the user can navigate back and forth in the browser history. This makes it an ideal solution for modals containing an editorial experience.
See the for an example.
For a more concrete example, check out the .
To create your modal, read the .
A modal is a popup layer that darkens the surroundings and comes with a focus lock. There are two types of modals: "dialog" and "sidebar".