A fullscreen modal displayed in on top of the page elements. Usually showcases a title, image/video, and description.

The modal’s JavaScript 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.
<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 class="mzp-c-card-image" src="../../img/image-3-2.jpg" 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="../../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>