The React documentation for this component can be read from Storybook (link here)

Modal

Use to serve additional content in an overlay above all other content.

Description

Only one modal can be displayed at a time.

On mobile screens the modal takes up the entire screen width and height. On larger screens, the modal takes up the centre of the page, and displays an overlay over the rest of the content.

How to use

  1. Copy the markup from the example. The modal can live anywhere in the DOM.
  2. Add what you wish to display inside the .modal__content div.
  3. Replace the ID of the modal to something unique. I.e. NOT dialog-1
  4. Add the button to the page where needed. Ensure the data-js-modal-open attribute matches the ID you gave the modal.

    How it works

    This component is based on the a11y-dialog project, which is designed with accessibility in mind, since modals are especially problematic for screen readers. The display of the modal is handled by the aria-hidden attribute. When this is set to true, the display property is set to none. The a11y-dialog library toggles only the aria-hidden attribute. The js/index.js file exports a method which finds all the modals (elements with data-js-modal attributes), moves them in the DOM to sit just before the closing body tag, and activates them with a method from the a11y-dialog library It moves the modals to sit just before the closing body tag, because the a11y-dialog library applies aria-hidden=true to every sibling element of the modal. We want everything but the modal to be aria-hidden, so moving modals to just before the closing body tag makes everything else a sibling. If you want to disable that, you can pass the "no-move" value to the data-js-modal attribute. The data-js-content attribute is not mandatory; whenever the modal contains an iframe element, you should pass the video value to this attribute which will allow interaction with the Youtube API for manipulating the player element within the modal.(Note: You'll also have to load the IFrame Player API Javascript code by inserting the following script: <script src="https://www.youtube.com/iframe_api"></script>)

    Data attributes:

  5. [data-js-modal]: This attribute should be added on the modal wrapper;
  6. [data-js-modal-open]: This attribute should be added on the button that will open the modal;
  7. [data-js-modal-close]: This attribute should be added on the button that will close the modal;
  8. [data-js-content]: This attribute should be added on the modal wrapper; it's used to identify the type of content held in the modal.

    Compatibility

    This component uses HTMLElement.prototype.closest. So please make sure to use polyfill.io when using this component, as support for this method is provided in the default feature set.

    Dependencies

    This component requires the transitionsSupported module to be included:
    import transitionsSupported from radius/dist/m2dm/js/transitions-supported;

Activate Sass component

In order to have the styling of this component available, you need to include it in your project. After including the Radius library in your main ./index.scss file, add this snippet:

@include radius-component-modal;

Import JS functionality

In order to have the JS functionality of this component available, you need to include it in your project. Assuming the project is using ES6:

import modal from 'radius/dist/m2dm/js/modal';
modal({ animationsOn: transitionsSupported });

Link to Abstract/Sketch file

Download Sketch / Abstract file

Usage

Usage example

Code example

<button type="button" data-js-modal-open="myModal">Open the dialog</button>
<button type="button" data-js-modal-open="myVideoModal">Open the video modal</button>
<button type="button" data-js-modal-open="myVideoModal">
  <div>
    button containing nested html
  </div>
</button>

<div class="modal" id="myModal" data-js-modal aria-hidden="true">
  <div class="modal__overlay" tabindex="-1" data-js-modal-close></div>
  <div class="modal__box" role="dialog" aria-labelledby="dialog-title">
    <div class="modal__header">
      <button type="button" aria-label="close" class="control-button" data-js-modal-close>
        Close
        <svg class="svg-icon svg-icon--small">
          <use xlink:href="https://dgnvhpcjbd3ba.cloudfront.net/radius/15.3.16/icons/svg-sprite.svg#cross"></use>
        </svg>
      </button>
    </div>
    <div class="modal__content" role="document">
      <!--  this is the user content -->
      <div class="placeholder-component">
      </div>
      <!--  end of user content -->
    </div>
  </div>
</div>

<div class="modal" id="myVideoModal" data-js-modal data-js-content="video" aria-hidden="true">
  <div class="modal__overlay" tabindex="-1" data-js-modal-close></div>
  <div class="modal__box" role="dialog" aria-labelledby="dialog-title">
    <div class="modal__header">
      <button type="button" aria-label="close" class="control-button" data-js-modal-close>
        Close
        <svg class="svg-icon svg-icon--small">
          <use xlink:href="https://dgnvhpcjbd3ba.cloudfront.net/radius/15.3.16/icons/svg-sprite.svg#cross"></use>
        </svg>
      </button>
    </div>
    <div class="modal__content u-text-center" role="document">
      <iframe id="player" data-js-player type="text/html" width="480" height="270"
      src="https://www.youtube.com/embed/-f_mixk2bgM?rel=0&amp;controls=1&amp;showinfo=0&amp;modestbranding=1&amp;enablejsapi=1"
      frameborder="0" allowfullscreen></iframe>
    </div>
  </div>
</div>