Modal

Example

The example below displays a red square when the modal is opened. The modal can be closed by clicking anywhere outside of the square or pressing the Esc key. While it is open, the background will not scroll and elements outside of the modal cannot be focused.

<Button on:click={() => (open = true)}>Open Modal</Button>

<Modal bind:open>
    <div />
</Modal>

<style>
    div {
        background: red;
        height: 100px;
        width: 100px;
    }
</style>

Disable Automatic Closing

You can use the disableCloseOnEscape and disableCloseOnOutsideClick props to prevent the close event from firing and a binded open prop from being set to false.

<Button on:click={() => (open = true)}>Open Modal</Button>

<Modal 
    bind:open
    disableCloseOnEscape
    disableCloseOnOutsideClick
    ariaLabelledby="modal-title"
    autoFocusElement="close-btn"
>
    <div>
        <p id="modal-title">Close with button only</p>
        <Button id="close-btn" on:click={() => (open = false)}>Close</Button>
    </div>
</Modal>

<style>
    div {
        background: white;
        padding: 16px
    }

    p {
        margin-bottom: 16px;
    }
</style>

Accessibility + Usability

For improved accessibility, it is recommended to use the ariaLabelledby prop to provide a name for the modal, typically the title.

Additionally, it is recommended to focus on a non-destructive action within the modal when it opens. The autoFocusElement prop can be utilized to automatically focus the element with the specified id when the modal opens. As an alternative, most focusable Dapper UI components offer an autoFocus prop that will automatically focus the element when it is mounted.

Props

id

Type

string

Default Value

Autogenerated random ID

The id of the modal.

When not set, it is automatically generated.

Can be accessed via the d4r-modal-id context.

open

Type

boolean

Default Value

false

Whether the modal is open.

This value can be bound to and will be set to false when the user clicks outside of the modal or presses the Esc key.

disableCloseOnOutsideClick

Type

boolean

Default Value

false

Whether the modal should be closed when the user clicks outside of it.

disableCloseOnEscape

Type

boolean

Default Value

false

Whether the modal should be closed when the user presses the Esc key.

autoFocusElement

Type

string | undefined

Default Value

undefined

The id of the element that should automatically be focused when the modal is opened.

ariaLabelledby

Type

string | undefined

Default Value

undefined

The aria-labelledby attribute.

ariaDescribedby

Type

string | undefined

Default Value

undefined

The aria-describedby attribute.