Class Modal

A modal dialog that displays as an overlay blocking interaction with the rest of the UI.

Inheritance

object

Popup

Popup<Modal>

Modal

Inherited Members

Popup<Modal>.shown

Popup<Modal>.dismissed

Popup<Modal>.sortingOrder

Popup<Modal>.SetContainerView(VisualElement)

Popup<Modal>.SetKeyboardDismiss(bool)

Popup<Modal>.SetLastFocusedElement(Focusable)

Popup<Modal>.SetSortingOrder(int)

Popup<Modal>.SetDisableAnimation(bool)

Popup.keyboardDismissEnabled

Popup.view

Popup.containerView

Popup.referenceView

Popup.contentView

Popup.rootView

Popup.disableAnimation

Popup.Dismiss()

Popup.Dismiss(DismissType)

Popup.Show()

object.Equals(object)

object.Equals(object, object)

object.GetHashCode()

object.GetType()

object.ReferenceEquals(object, object)

object.ToString()

Namespace: Unity.AppUI.UI

Assembly: Unity.AppUI.dll

Syntax

public sealed class Modal : Popup<Modal>

Remarks

A modal is a dialog window that appears on top of the current interface, blocking interaction with the parent application until the modal is closed. It typically features a backdrop overlay that dims the content behind it.

Modals are ideal for critical information that requires user attention, such as confirmations, alerts, or forms that must be completed before proceeding. They maintain focus and prevent users from interacting with other parts of the interface.

The modal component supports various display modes including normal windowed, fullscreen with margins, and complete fullscreen takeover. It can be configured to dismiss when clicking outside the modal content area.

Use modals sparingly as they interrupt the user workflow. Consider alternatives like inline editing, sidebars, or separate pages for non-critical interactions.

Anatomy

Modal Examples:

Confirmation modal.

<appui:Modal title="Confirmation" size="M" visible="true">
    <appui:Text text="Are you sure you want to delete this item?" size="M" />
    <appui:ActionGroup>
        <appui:Button title="Cancel" quiet="true" />
        <appui:Button title="Delete" variant="Destructive" />
    </appui:ActionGroup>
</appui:Modal>

Form modal with inputs.

<appui:Modal title="Settings" size="L" visible="true">
    <appui:TextField placeholder-text="Enter name..." size="M" />
    <appui:TextArea placeholder-text="Description..." size="M" />
    <appui:ActionGroup>
        <appui:Button title="Cancel" quiet="true" />
        <appui:Button title="Save" variant="Accent" />
    </appui:ActionGroup>
</appui:Modal>

Different Sizes.

<appui:Modal title="Small Modal" size="S" visible="true">
    <appui:Text text="Small content" size="S" />
</appui:Modal>
<appui:Modal title="Medium Modal" size="M" visible="true">
    <appui:Text text="Medium content area" size="M" />
</appui:Modal>
<appui:Modal title="Large Modal" size="L" visible="true">
    <appui:Text text="Large content area with more space" size="M" />
</appui:Modal>

Examples

Basic modal with content. Creating a simple modal dialog with custom content.

var content = new VisualElement();
content.Add(new Text("Are you sure you want to delete this item?"));
var buttonContainer = new VisualElement();
var cancelButton = new Button ;
var confirmButton = new Button { title = "Delete", variant = ButtonVariant.Destructive };
buttonContainer.Add(cancelButton);
buttonContainer.Add(confirmButton);
content.Add(buttonContainer);
var modal = Modal.Build(rootElement, content)
.SetOutsideClickDismiss(true);
cancelButton.clicked += modal.Dismiss;
confirmButton.clicked += () => {
DeleteItem();
modal.Dismiss();
};
modal.Show();

Fullscreen modal configuration. Different fullscreen modes for modal presentation.

// Normal modal (default)
var normalModal = Modal.Build(rootElement, contentElement)
    .SetFullScreenMode(ModalFullScreenMode.None);
// Fullscreen with backdrop margin
var fullscreenModal = Modal.Build(rootElement, contentElement)
.SetFullScreenMode(ModalFullScreenMode.FullScreen);
// Complete fullscreen takeover
var takeoverModal = Modal.Build(rootElement, contentElement)
.SetFullScreenMode(ModalFullScreenMode.FullScreenTakeOver);
// Show any of them
normalModal.Show();

Modal with outside click handling. Configuring modal dismissal behavior for outside clicks.

var modal = Modal.Build(rootElement, contentElement)
    .SetOutsideClickDismiss(true)
    .SetOutsideClickStrategy(OutsideClickStrategy.Bounds);
// Handle modal events
modal.shown += () => Debug.Log("Modal shown");
modal.dismissed += (reason) => {
switch (reason)
{
case DismissType.OutsideClick:
Debug.Log("Modal dismissed by outside click");
break;
case DismissType.Keyboard:
Debug.Log("Modal dismissed by ESC key");
break;
default:
Debug.Log("Modal dismissed programmatically");
break;
}
};
modal.Show();

Properties

fullscreenMode

Set the fullscreen mode for this Modal.

See ModalFullScreenMode values for more info.

Declaration

public ModalFullScreenMode fullscreenMode { get; set; }

Property Value

Type	Description
ModalFullScreenMode

outsideClickDismissEnabled

True if the Modal can be dismissed by clicking outside of it, False otherwise.

Declaration

public bool outsideClickDismissEnabled { get; set; }

Property Value

Type	Description
bool

outsideClickStrategy

The strategy used to determine if the click is outside the Modal.

Declaration

public OutsideClickStrategy outsideClickStrategy { get; set; }

Property Value

Type	Description
OutsideClickStrategy

Methods

AnimateViewIn()

Start the animation for this popup.

Declaration

protected override void AnimateViewIn()

Overrides

Popup.AnimateViewIn()

Build(VisualElement, VisualElement)

Build a new Modal component.

Declaration

public static Modal Build(VisualElement referenceView, VisualElement content)

Parameters

Type	Name	Description
VisualElement	referenceView	An arbitrary UI element inside the UI panel.
VisualElement	content	The VisualElement UI element to display inside this Modal.

Returns

Type	Description
Modal	The Modal instance.

Exceptions

Type	Condition
ArgumentNullException	If referenceView is null.

GetFocusableElement()

Returns the element that will be focused when the view will become visible.

The default value is `null`.

Declaration

protected override VisualElement GetFocusableElement()

Returns

Type	Description
VisualElement	The element that will be focused when the view will become visible.

Overrides

Popup.GetFocusableElement()

HideView(DismissType)

Called when it is time to hide the popup.

Declaration

protected override void HideView(DismissType reason)

Parameters

Type	Name	Description
DismissType	reason	The reason why the popup should be dismissed.

Overrides

Popup.HideView(DismissType)

InvokeShownEventHandlers()

Called when the popup has become visible. This method will invoke any handlers attached to the shown event.

Declaration

protected override void InvokeShownEventHandlers()

Overrides

Popup<Modal>.InvokeShownEventHandlers()

SetFullScreenMode(ModalFullScreenMode)

Set a new value for fullscreenMode property.

Declaration

public Modal SetFullScreenMode(ModalFullScreenMode mode)

Parameters

Type	Name	Description
ModalFullScreenMode	mode	The new value.

Returns

Type	Description
Modal	The Modal object.

SetOutsideClickDismiss(bool)

Activate the possibility to dismiss the Modal by clicking outside of it.

Declaration

public Modal SetOutsideClickDismiss(bool dismissEnabled)

Parameters

Type	Name	Description
bool	dismissEnabled	True to activate the feature, False otherwise.

Returns

Type	Description
Modal	The modal

SetOutsideClickStrategy(OutsideClickStrategy)

Set the strategy used to determine if the click is outside the Modal.

Declaration

public Modal SetOutsideClickStrategy(OutsideClickStrategy strategy)

Parameters

Type	Name	Description
OutsideClickStrategy	strategy	The strategy to use.

Returns

Type	Description
Modal	The modal

ShouldAnimate()

Implement this method to know if the popup should call AnimateViewIn() and AnimateViewOut(DismissType) methods or not.

Declaration

protected override bool ShouldAnimate()

Returns

Type	Description
bool	True if you want to animate the popup, False otherwise.

Overrides

Popup.ShouldAnimate()

ShouldDismiss(DismissType)

Check if the popup should be dismissed or not, depending on the reason.

Declaration

protected override bool ShouldDismiss(DismissType reason)

Parameters

Type	Name	Description
DismissType	reason	Why the element has been dismissed.

Returns

Type	Description
bool	True if the popup should be dismissed, False otherwise.

Overrides

Popup.ShouldDismiss(DismissType)