Modal

Overview

ds-modal implements a full browser window, static, fixed position, tinted panel that overlays any background content and currently works in conjuction with ds-dialog.

Dark-Mode support

As of v1.5.43+ ds-modal supports dark-mode and switches the background tinted color accordingly.

Options

Basic usage

html

Copy

Content position

Any content within the modal container is centered vertically and horizontally by default, but specific positioning options can be achieved using the specific classes shown below.

Top alignment

html

Copy

Bottom alignment

html

Copy

Left alignment

html

Copy

Right alignment

html

Copy

Loading state

A modal can be triggered to display a loading state - where the modal contents are hidden, and the replaced by a centered spinning loading icon – without affecting the dimensions of the modal.

Additional options are available using Message state

Default

html

Copy

Alternative loading-refresh icon

html

Copy

Custom icon by adding any icon class

html

Copy

Message state

Message state extends and can be used with Loading state. If a modal has a data-attribute data-ds-message the modal contents are hidden, and replaced by an icon and the text of the data-ds-message.

html

Copy

Loading state with a message

html

Copy

You can set a custom icon

html

Copy

You can set a custom icon, with the loading state animation

html

Copy