Simple modal with external template

by davidxmartins

HTML

<div class="simple-modal">
  <div class="simple-box">
    <button type="button" class="simple-close" aria-label="Close">×</button>
    <div class="simple-content">
      <!-- Content will be injected here by JS -->
    </div>
  </div>
</div>

<button data-simple-modal="resale">Open Resale Form</button>
<p data-simple-modal="resale" style="cursor: pointer">testing</p>

<div data-simple-content="resale" style="display:none">
  <h2 style="color:#fff;margin-top:0">Revenda</h2>
</div>

CSS

.simple-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;
}

.simple-modal.show { opacity:1; visibility:visible; pointer-events:auto; }

.simple-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;
}

.simple-modal.show .simple-box { transform:scale(1); }

.simple-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%;
}

.simple-close:hover { background:rgba(255,255,255,.18); }

JavaScript

document.addEventListener('DOMContentLoaded', () => {
  const modal   = document.querySelector('.simple-modal');
  const content = document.querySelector('.simple-content');

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

  // CLOSE (you had this part missing in your snippet — I only added the renamed version)
  const close = () => modal.classList.remove('show');
  document.querySelector('.simple-close').addEventListener('click', close);
  modal.addEventListener('click', e => { if (e.target === modal) close(); });
  document.addEventListener('keydown', e => {
    if (e.key === 'Escape' && modal.classList.contains('show')) close();
  });
});