Modal

The modal structure is very simple:

• .modal is the wrapper for overlay and the modal content.
  • .modal-container is the container for the modal content.
  • .modal-header is the header for the modal content and contains a spot for headline text and a close button.
  • .modal-body is for the main content of the modal.
  • .modal-footer is the footer for the modal. Often this area is used for buttons for close or submit actions.
  • .modal-overlay is a semi-transparent background that covers the full height and width of the viewport on desktop.

To activate the modal, just add the is-active modifier on .modal. Currently the Digital Design system does not include javascript, so you will need to provide your own implementation for the modal triggers.

Note: An accessibility check will be required when implementing a modal, for in some cases javascript will be needed to change the tab order of the modal.

<!-- Modal Toggle Button-->
<button class="button button-primary" id="modalToggle">Open Modal</button>

<!-- Modal -->
<div class='modal ' role='alertdialog' aria-labelledby='modalTitle' aria-describedby='modalDescription' aria-hidden='false'>
   <div class='modal-container'>
      <div class='modal-header'>
         <span class='heading-size-h3 margin-0'>Modal Headline</span>
         <button class='modal-close' role='button' aria-label='Close modal'>
             <span class="modal-close-icon"><i class="icon-times"></i></span>
             <span class='modal-close-label'>Close</span>
         </button>
      </div>
      <div class='modal-body'>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
         </p>
      </div>
      <div class='modal-footer flex-justify-end'>
         <button class='button button-primary modal-close-button' role='button' aria-label='Close modal'>Close</button>
      </div>
   </div>
   <div class='modal-overlay'></div>
</div>

Although you will need to write the functionality in the language of your choice, below is example code written in javascript, which is providing the functionality for the demo component above.

const modalToggle = document.querySelector('#modalToggle');
const modal = document.querySelector('.modal');
const closeModalIcon = document.querySelector('.modal-close');
const closeModalButton = document.querySelector('.modal-close-button');

// Open the modal
modalToggle.addEventListener('click', function() {
  modal.classList.add('is-active')
})

// Close the modal
closeModalButton.addEventListener('click', function() {
    modal.classList.remove('is-active')
})
closeModalIcon.addEventListener('click', function() {
  modal.classList.remove('is-active')
})