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

<div class="ds-modal">
  <div>Content</div>
</div>

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

<div class="ds-modal --top">
  <div>Content</div>
</div>

Bottom alignment

html

Copy

<div class="ds-modal --bottom">
  <div>Content</div>
</div>

Left alignment

html

Copy

<div class="ds-modal --left">
  <div>Content</div>
</div>

Right alignment

html

Copy

<div class="ds-modal --right">
  <div>Content</div>
</div>

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

<p class="ds-text">
  Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec sed odio
  dui. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus
  eget urna mollis ornare vel eu leo. Lorem ipsum dolor sit amet, consectetur
  adipiscing elit. Nulla vitae elit libero, a pharetra augue. Nullam quis risus
  eget urna mollis ornare vel eu leo. Aenean lacinia bibendum nulla sed
  consectetur. Nulla vitae elit libero, a pharetra augue. Lorem ipsum dolor sit
  amet, consectetur adipiscing elit.
</p>
<div class="ds-modal --loading"></div>

Alternative loading-refresh icon

html

Copy

<p class="ds-text">
  Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec sed odio
  dui. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus
  eget urna mollis ornare vel eu leo. Lorem ipsum dolor sit amet, consectetur
  adipiscing elit. Nulla vitae elit libero, a pharetra augue. Nullam quis risus
  eget urna mollis ornare vel eu leo. Aenean lacinia bibendum nulla sed
  consectetur. Nulla vitae elit libero, a pharetra augue. Lorem ipsum dolor sit
  amet, consectetur adipiscing elit.
</p>
<div class="ds-modal --loading-refresh"></div>

Custom icon by adding any icon class

html

Copy

<p class="ds-text">
  Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec sed odio
  dui. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus
  eget urna mollis ornare vel eu leo. Lorem ipsum dolor sit amet, consectetur
  adipiscing elit. Nulla vitae elit libero, a pharetra augue. Nullam quis risus
  eget urna mollis ornare vel eu leo. Aenean lacinia bibendum nulla sed
  consectetur. Nulla vitae elit libero, a pharetra augue. Lorem ipsum dolor sit
  amet, consectetur adipiscing elit.
</p>
<div class="ds-modal --loading --icon-radar"></div>

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

<p class="ds-text">
  Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec sed odio
  dui. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus
  eget urna mollis ornare vel eu leo. Lorem ipsum dolor sit amet, consectetur
  adipiscing elit. Nulla vitae elit libero, a pharetra augue. Nullam quis risus
  eget urna mollis ornare vel eu leo. Aenean lacinia bibendum nulla sed
  consectetur. Nulla vitae elit libero, a pharetra augue. Lorem ipsum dolor sit
  amet, consectetur adipiscing elit.
</p>
<div class="ds-modal" data-ds-message="Message text"></div>

Loading state with a message

html

Copy

<p class="ds-text">
  Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec sed odio
  dui. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus
  eget urna mollis ornare vel eu leo. Lorem ipsum dolor sit amet, consectetur
  adipiscing elit. Nulla vitae elit libero, a pharetra augue. Nullam quis risus
  eget urna mollis ornare vel eu leo. Aenean lacinia bibendum nulla sed
  consectetur. Nulla vitae elit libero, a pharetra augue. Lorem ipsum dolor sit
  amet, consectetur adipiscing elit.
</p>
<div class="ds-modal --loading" data-ds-message="Message text"></div>

You can set a custom icon

html

Copy

<p class="ds-text">
  Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec sed odio
  dui. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus
  eget urna mollis ornare vel eu leo. Lorem ipsum dolor sit amet, consectetur
  adipiscing elit. Nulla vitae elit libero, a pharetra augue. Nullam quis risus
  eget urna mollis ornare vel eu leo. Aenean lacinia bibendum nulla sed
  consectetur. Nulla vitae elit libero, a pharetra augue. Lorem ipsum dolor sit
  amet, consectetur adipiscing elit.
</p>
<div class="ds-modal --icon-rocket" data-ds-message="Message text"></div>

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

html

Copy

<p class="ds-text">
  Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec sed odio
  dui. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus
  eget urna mollis ornare vel eu leo. Lorem ipsum dolor sit amet, consectetur
  adipiscing elit. Nulla vitae elit libero, a pharetra augue. Nullam quis risus
  eget urna mollis ornare vel eu leo. Aenean lacinia bibendum nulla sed
  consectetur. Nulla vitae elit libero, a pharetra augue. Lorem ipsum dolor sit
  amet, consectetur adipiscing elit.
</p>
<div
  class="ds-modal --loading --icon-compass"
  data-ds-message="Message text"
></div>