Standard Life Digital Framework

Modal

full screen new window example HTML markup

A modal dialog is a window that forces the user to interact with it before they can go back to using the parent application.

Usage

Place the modal anywhere on the page, when the modal is active it will expand a background image on the whole screen and the modal dialog will be displayed in the top center.

Adding the class slb-show to the outer container of the modal will display it, the modal does not need to be used with a button.

Accessible attributes

Accessible attribute	Description
`role="dialog"`	Identifies the element that serves as the dialog container.
`aria-labelledby="IDREF"`	Gives the dialog an accessible name by referring to the element that provides the dialog title.
`aria-describedby="IDREF"`	Gives the dialog an accessible description by referring to the dialog content that describes the primary message or purpose of the dialog.
`aria-modal="true"`	Tells assistive technologies that the windows underneath the current dialog are not available for interaction.

JavaScript Support

JavaScript Support class name	Description
`slb-show`	Add the show class to the modal container to display the modal, removing the class will display nothing.

.slb-modal__dialog - Default scroll on the viewport.

.slb-modal__dialog--scrollable - Scrollable modal body.

Markup: modal\modal.hbs

Copy

<div>
    <button id="modal-example-button-[modifier class]" class="slb-button slb-button--cta slb-modal__button" data-toggle="modal" data-target="#modal-example-[modifier class]" href="#">Open Modal</button>
</div>

<div class="slb-modal" id="modal-example-[modifier class]" role="region" aria-label="Modal Example" aria-modal="true">
  <div class="slb-modal__dialog [modifier class]" role="document">
    <div class="slb-modal__content">
      <div class="slb-modal__header">
        <h3 class="slb-modal__title">Heading H3</h3>
        <button type="button" class="slb-modal__close" aria-label="Close" data-dismiss="modal">
            Close<svg class="slb-modal__close-icon" viewBox="0 0 352 512" aria-hidden="true"><title>times</title><path d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"/></svg>
        </button>
      </div>
      <div class="slb-modal__body">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus semper placerat arcu, eu finibus est pulvinar.</p>
        <p>Phasellus at faucibus munc, id euismod diam. Mauria vitae metua at felia convallis gravida.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus semper placerat arcu, eu finibus est pulvinar.</p>
        <p>Phasellus at faucibus munc, id euismod diam. Mauria vitae metua at felia convallis gravida.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus semper placerat arcu, eu finibus est pulvinar.</p>
        <p>Phasellus at faucibus munc, id euismod diam. Mauria vitae metua at felia convallis gravida.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus semper placerat arcu, eu finibus est pulvinar.</p>
        <p>Phasellus at faucibus munc, id euismod diam. Mauria vitae metua at felia convallis gravida.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus semper placerat arcu, eu finibus est pulvinar.</p>
        <p>Phasellus at faucibus munc, id euismod diam. Mauria vitae metua at felia convallis gravida.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus semper placerat arcu, eu finibus est pulvinar.</p>
        <p>Phasellus at faucibus munc, id euismod diam. Mauria vitae metua at felia convallis gravida.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus semper placerat arcu, eu finibus est pulvinar.</p>
        <p>Phasellus at faucibus munc, id euismod diam. Mauria vitae metua at felia convallis gravida.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus semper placerat arcu, eu finibus est pulvinar.</p>
        <p>Phasellus at faucibus munc, id euismod diam. Mauria vitae metua at felia convallis gravida.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus semper placerat arcu, eu finibus est pulvinar.</p>
        <p>Phasellus at faucibus munc, id euismod diam. Mauria vitae metua at felia convallis gravida.</p>
      </div>
      <div class="slb-modal__footer">
        <button class="slb-button slb-button--cta" href="#">Continue</button>
      </div>
    </div>
  </div>
</div>

Source: components/_modal.scss