simple modal with template in the script

by davidxmartins

HTML

<button data-modal="resale">Open Resale Form</button>
This is not recomended. External template is best
<div data-modal-content="resale" style="display:none">
  <h2 style="color:#fff;margin-top:0">Revenda</h2>
  <form id="myForm">…your form + canvas captcha…</form>
</div>

CSS

/* ───── BLACK CANVAS MODAL – NO HTML IN FOOTER ───── */
.modal {
  position:fixed; inset:0; background:rgba(0,0,0,0.88);
  display:flex; justify-content:center; align-items:center;
  z-index:9999; opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .35s ease, visibility .35s ease;
}
.modal.show { opacity:1; visibility:visible; pointer-events:auto; }

.modal-box {
  position:relative;
  background:#000; color:#fff;
  width:90%; max-width:760px; max-height:90vh;
  border-radius:20px; padding:48px; box-sizing:border-box;
  box-shadow:0 35px 100px rgba(0,0,0,.7);
  transform:scale(0.92); transition:transform .35s ease;
}
.modal.show .modal-box { transform:scale(1); }

.modal-close {
  position:absolute; top:18px; right:22px;
  background:none; border:none; color:#fff; font-size:44px;
  cursor:pointer; width:56px; height:56px;
  display:grid; place-items:center; border-radius:50%;
}
.modal-close:hover { background:rgba(255,255,255,.18); }

JavaScript

/* ───── UNIVERSAL BLACK CANVAS MODAL – NO FOOTER HTML ───── */
document.addEventListener('DOMContentLoaded', () => {
  // Create the modal once and inject it into <body>
  const modalHTML = `
    <div class="modal">
      <div class="modal-box">
        <button type="button" class="modal-close" aria-label="Close">×</button>
        <div class="modal-content"></div>
      </div>
    </div>
  `;
  document.body.insertAdjacentHTML('beforeend', modalHTML);

  const modal        = document.querySelector('.modal');
  const modalContent = document.querySelector('.modal-content');

  document.addEventListener('click', e => {
    // OPEN
    const trigger = e.target.closest('[data-modal]');
    if (trigger) {
      e.preventDefault();
      const name   = trigger.dataset.modal;
      const source = document.querySelector(`[data-modal-content="${name}"]`);
      if (source) {
        modalContent.innerHTML = source.innerHTML;
        modal.classList.add('show');
      }
      return;
    }

    // CLOSE
    if (e.target === modal || e.target.classList.contains('modal-close')) {
      modal.classList.remove('show');
    }
  });

  // ESC
  document.addEventListener('keydown', e => {
    if (e.key === 'Escape' && modal.classList.contains('show')) {
      modal.classList.remove('show');
    }
  });
});