Modal

<div class="c-button-group">
  <button type="button" class="c-button c-button--default" onclick="openModal('#small')">
    Open small modal
  </button>
  <button type="button" class="c-button c-button--default" onclick="openModal('#default')">
    Open default modal
  </button>
  <button type="button" class="c-button c-button--default" onclick="openModal('#large')">
    Open large modal
  </button>
</div>

<div>
  <div class="c-cover" id="cover" onclick="closeModals()"></div>

  <div class="c-modal c-modal--small" id="small">
    <div class="c-modal__header">
      <h2 class="c-modal__title">Unsaved changes</h2>
      <button type="button" class="c-button c-modal__close c-button--subtle c-button--icon" onclick="closeModals()">
        <i class="c-button__icon icon icon-close"></i>
      </button>
    </div>
    <div class="c-modal__body">
      <p>
        Are you sure you want to leave this page without saving pending changes?
      </p>
    </div>
    <div class="c-modal__footer">
      <div class="c-modal__footer-right">
        <div class="c-button-group">
          <button type="button" class="c-button c-button--subtle" onclick="closeModals()">
            <div class="c-button__label">Keep editing</div>
          </button>
          <button type="button" class="c-button c-button--danger" onclick="closeModals()">
            <div class="c-button__label">Yes, I'm sure</div>
          </button>
        </div>
      </div>
    </div>
  </div>

  <div class="c-modal" id="default">
    <div class="c-modal__header">
      <h2 class="c-modal__title">Default modal size</h2>
      <button type="button" class="c-button c-modal__close c-button--subtle c-button--icon" onclick="closeModals()">
        <i class="c-button__icon icon icon-close"></i>
      </button>
    </div>
    <div class="c-modal__body">
      <p>Modal contents.</p>
    </div>
    <div class="c-modal__footer">
      <div class="c-modal__footer-right">
        <button type="button" class="c-button c-button--primary" onclick="closeModals()">
          <div class="c-button__label">Confirm</div>
        </button>
      </div>
    </div>
  </div>

  <div class="c-modal c-modal--large" id="large">
    <div class="c-modal__header">
      <h2 class="c-modal__title">Large modal</h2>
      <button type="button" class="c-button c-modal__close c-button--subtle c-button--icon" onclick="closeModals()">
        <i class="c-button__icon icon icon-close"></i>
      </button>
    </div>
    <div class="c-modal__body">
      <p>Modal contents.</p>
    </div>
    <div class="c-modal__footer">
      <div class="c-modal__footer-right">
        <button type="button" class="c-button c-button--primary" onclick="closeModals()">
          <div class="c-button__label">Confirm</div>
        </button>
      </div>
    </div>
  </div>
</div>

<script>
  const openModal = (selector) => {
    const cover = document.querySelector('#cover')
    const modal = document.querySelector(selector)
    cover.classList.add('c-cover--visible')
    modal.classList.add('c-modal--visible')
  }
  const closeModals = () => {
    const cover = document.querySelector('#cover')
    const modal = document.querySelector('<div class=""></div>c-modal--visible')
    cover.classList.remove('c-cover--visible')
    modal.classList.remove('c-modal--visible')
  }
</script>