<section class="demo-section">
  <h2>Modals</h2>

  <div class="demo-row">
    <button class="btn btn-primary" type="button" onclick="document.getElementById('demo-modal').classList.add('a-show')">
      Open modal
    </button>
  </div>

  <div id="demo-modal" class="modal" aria-hidden="true" role="dialog" aria-modal="true" aria-labelledby="demo-modal-title">
    <div class="modal-backdrop" onclick="this.parentElement.classList.remove('a-show')"></div>
    <div class="modal-dialog" role="document">
      <header class="modal-header">
        <h4 id="demo-modal-title" class="modal-title">Modal title</h4>
        <button class="modal-close" type="button" aria-label="Close" onclick="this.closest('.modal').classList.remove('a-show')">
          <span class="vmk-icon"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M18 6L6 18M6 6L18 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></span>
        </button>
      </header>
      <div class="modal-panel">
        <div class="modal-body">
          <p>Modal body content goes here. Press Escape or click the backdrop to close.</p>
        </div>
        <footer class="modal-footer">
          <button class="btn btn-secondary" type="button" onclick="this.closest('.modal').classList.remove('a-show')">Cancel</button>
          <button class="btn btn-primary" type="button" onclick="this.closest('.modal').classList.remove('a-show')">Confirm</button>
        </footer>
      </div>
    </div>
  </div>
</section>