Modal

A fullscreen modal dialog UI component.

A description with a maximum of 100 characters. That usually means only one or two sentences. Learn more.
<button class="mzp-c-button" type="button">
  Open Modal</button>

<div class="mzp-u-modal-content">
  <figure>
    <!-- media could be an image or video -->
    <img src="../../../static/img/modal/modal.png" alt="">
    <figcaption>
      A description with a maximum of 100 characters. That usually
      means only one or two sentences. <a href="#">Learn more.</a>
    </figcaption>
  </figure>
</div>

<script src="../../../assets/protocol/protocol/js/protocol-modal.js"></script>

<script>
  (function() {
    'use strict';
    var content = document.querySelector(
      '.mzp-u-modal-content');
    var button = document.querySelector('.mzp-c-button');
    button.addEventListener('click', function(e) {
      e.preventDefault();
      Mzp.Modal.createModal(e.target, content, {
        title: 'Example headline with 35 characters',
        className: 'mzp-has-media',
        closeText: 'Close modal',
        onCreate: function() {
          console.log('Modal opened');
        },
        onDestroy: function() {
          console.log('Modal closed');
        }
      });
    }, false);
  })();
</script>

Notes

A JS example to invoke a modal dialog is provided below.

The modal JS provides the following options

  • origin [DOM Element] element that triggered the modal
  • content [DOM ELement] content to display in the modal
  • options [Object] object of optional params
    • title [String] title to display at the top of the modal
    • className [String] optional CSS class name to apply to the modal window.
    • onCreate [Function] function to fire after modal has been created
    • onDestroy [Function] function to fire after modal has been closed
    • allowScroll [Boolean] allow/restrict page scrolling when modal is open
    • closeText [String] text to use for close button a11y.

Inline JavaScript in this example is for demo purposes only. Use external files in production code.

Tips

  • You can use the utility class mzp-u-modal-content to hide content (when JS is enabled) that is intended to be shown only once a modal is displayed.
  • You can pass an additional className of mzp-has-media to the modal to indicate that if the modal contains an image or video, those elements should be displayed full width.
  • Any HTML content you wish can be displayed within a modal.
  • Media content such as video should occupy the full width of the modal dialog, and be at least 1200px wide.