Modal

deprecated in v2.11Refer to the Dialog component documentation.
Learn more

Overview

Usage

  • Contextual workflows or messaging
  • Focused tasks
  • Error messaging
  • Onboarding

Sample

4 samples
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<calcite-modal aria-labelledby="modal-title" id="example-modal">
    <div slot="header" id="modal-title">
        Add a group
    </div>
    <div slot="content">
        <calcite-label>
            Group name
            <calcite-input value="City of Acme Surveying Crews" placeholder="Enter a descriptive title"></calcite-input>
        </calcite-label>
        <calcite-label>
            Choose default user role
            <calcite-tile-select-group>
                <calcite-tile-select checked input-enabled input-alignment="end" icon="rangefinder"
                    heading="Field operator"
                    description="This role allows users in the field to create new Reports, and view and edit existing Reports and Attachments">
                </calcite-tile-select>
                <calcite-tile-select input-enabled input-alignment="end" icon="knowledge-graph-dashboard"
                    heading="Office coordinator"
                    description="This role allows teammates on-base to view, duplicate, and create meaningful insights from Reports">
                </calcite-tile-select>
            </calcite-tile-select-group>
        </calcite-label>
        <calcite-notice open icon="pencil" width="full">
            <div slot="message">You can edit this choice later on, in Settings.</div>
        </calcite-notice>
    </div>
    <calcite-button slot="back" kind="neutral" width="full">
        Back
    </calcite-button>
    <calcite-button slot="secondary" width="full" appearance="outline">
        Cancel
    </calcite-button>
    <calcite-button slot="primary" width="full">
        Save
    </calcite-button>
</calcite-modal>
<calcite-button id="example-button">Open modal</calcite-button>
v3.0.3

Accessibility

Focus order

The Modal's focus will navigate content sequentially to preserve meaning and expected use in support of Success Criterion 2.4.3: Focus Order. For this reason the first element depicted visually in the Modal will receive keyboard focus, such as the component's close button (default).

Keyboard focus

It is strongly recommended to have focusable elements cycle through Modal where focusTrapDisabled is false (default) to support assistive technology users. The expected behavior for assistive technologies is while the component is open only the contents and focusable elements are accessible.

Keyboard navigation

KeyFunction
TabMoves focus to next focusable element. If the current focus is the last element and focusTrapDisabled is false, focus will cycle to the first element.
Tab and ShiftMoves focus to previous focusable element. If the current focus is the first element and focusTrapDisabled is false, focus will cycle to the last element.
EscIf escapeDisabled is false, closes the component.

API reference

Properties

PropertyAttributeDescriptionTypeDefault
beforeClosePasses a function to run before the component closes.(el: HTMLCalciteModalElement) => Promise<void>
closeButtonDisabledclose-button-disabledWhen true, disables the component's close button.booleanfalse
dockeddockedWhen true, prevents the component from expanding to the entire screen on mobile devices.booleanfalse
escapeDisabledescape-disabledWhen true, disables the default close on escape behavior.booleanfalse
focusTrapDisabledfocus-trap-disabledWhen true, prevents focus trapping.booleanfalse
focusTrapOptionsSpecifies custom focus trap configuration on the component, where "allowOutsideClick" allows outside clicks, "initialFocus" enables initial focus, "returnFocusOnDeactivate" returns focus when not active, and "extraContainers" specifies additional focusable elements external to the trap (e.g., 3rd-party components appending elements to the document body).{ initialFocus?: FocusTargetOrFalse | (() => void); returnFocusOnDeactivate?: boolean; allowOutsideClick?: boolean | MouseEventToBoolean; extraContainers?: string | HTMLElement | SVGElement | Array<string | HTMLElement | SVGElement>; }
fullscreenfullscreenSets the component to always be fullscreen. Overrides widthScale and --calcite-modal-width / --calcite-modal-height.booleanfalse
kindkindSpecifies the kind of the component, which will apply to top border."brand" | "danger" | "info" | "success" | "warning"
messageOverridesUse this property to override individual strings used by the component.{ close?: string; }
openopenWhen true, displays and positions the component.booleanfalse
outsideCloseDisabledoutside-close-disabledWhen true, disables the closing of the component when clicked outside.booleanfalse
scalescaleSpecifies the size of the component."l" | "m" | "s""m"
widthScalewidth-scaleSpecifies the width of the component."l" | "m" | "s""m"

Slots

NameDescription
headerA slot for adding header text.
contentA slot for adding the component's content.
content-topA slot for adding content to the component's sticky header, where content remains at the top of the component when scrolling up and down.
content-bottomA slot for adding content to the component's sticky footer, where content remains at the bottom of the component when scrolling up and down.
primaryA slot for adding a primary button.
secondaryA slot for adding a secondary button.
backA slot for adding a back button.

Styles

NameDescription
--calcite-modal-content-backgroundSpecifies the background color of content placed in the component's "content" slot.
--calcite-modal-content-paddingSpecifies the padding of the component's "content" slot.
--calcite-modal-scrim-backgroundSpecifies the background color of the component's scrim.
--calcite-modal-widthSpecifies the width of the component, using px, em, rem, vw, or %. Will never exceed the width of the viewport. Will not apply if fullscreen if set.
--calcite-modal-heightSpecifies the height of the component, using px, em, rem, vh, or %. Will never exceed the height of the viewport. Will not apply if fullscreen if set.

Events

NameDescriptionBehavior
calciteModalBeforeCloseFires when the component is requested to be closed and before the closing transition begins.bubblescomposed
calciteModalBeforeOpenFires when the component is added to the DOM but not rendered, and before the opening transition begins.bubblescomposed
calciteModalCloseFires when the component is closed and animation is complete.bubblescomposed
calciteModalOpenFires when the component is open and animation is complete.bubblescomposed

Methods

NameDescriptionSignature
componentOnReadyCreate a promise that resolves once component is fully loaded.componentOnReady(): Promise<void>
scrollContentSets the scroll top of the component's content.scrollContent(top?: number, left?: number): Promise<void>
setFocusSets focus on the component's "close" button (the first focusable item).setFocus(): Promise<void>
updateFocusTrapElementsUpdates the element(s) that are included in the focus-trap of the component.updateFocusTrapElements(extraContainers?: FocusTrapOptions["extraContainers"]): Promise<void>

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.

You can no longer sign into this site. Go to your ArcGIS portal or the ArcGIS Location Platform dashboard to perform management tasks.

Your ArcGIS portal

Create, manage, and access API keys and OAuth 2.0 developer credentials, hosted layers, and data services.

Your ArcGIS Location Platform dashboard

Manage billing, monitor service usage, and access additional resources.

Learn more about these changes in the What's new in Esri Developers June 2024 blog post.

Close