Modal

Open Modal

<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>