Simple modal with no template

by davidxmartins

HTML

<div class="simple-modal  resale-modal" data-simple-content="resale">
  <div class="simple-box">
    <button type="button" class="simple-close" aria-label="Close">×</button>
    <div class="simple-inner">
      <h2>Revenda</h2>
      <p>hello, I'm some copy text...</p>
    </div>
  </div>
</div>

<a href="#" data-open-modal="resale">Open Resale Form</a>


<div class="simple-modal  test-modal" data-simple-content="resale">
  <div class="style-b simple-box">
    <button type="button" class="simple-close" aria-label="Close">×</button>
    <div class="simple-inner">
      <h2>Revenda</h2>
      <p>hello, I'm some copy text...</p>
    </div>
  </div>
</div>

<a href="#" data-open-modal="test">Open Resale Form</a>

CSS

.simple-modal {
  position:fixed; inset:0; background:rgba(0,0,0,0.75);
  display:flex; justify-content:center; align-items:center;
  z-index:9999; opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .35s ease;
}
.simple-modal.active { opacity:1; visibility:visible; pointer-events:auto; }

.simple-box {
  background:#f8f8f8; color:#222; border:1px solid #ddd;
  width:90%; max-width:760px; max-height:90vh;
  border-radius:20px; padding:48px; box-sizing:border-box;
  transform:scale(0.92); transition:transform .35s ease;
}
.style-b .simple-box {
  background:#c21616; 
}
.simple-modal.active .simple-box { transform:scale(1); }

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

JavaScript

// EXACTLY like your Resale and Cookie scripts — no shared anything
document.addEventListener('click', e => {
  const trigger = e.target.closest('[data-open-modal]');
  if (trigger) {
    e.preventDefault();
    const id = trigger.dataset.openModal;
    const modal = document.querySelector(`.simple-modal[data-simple-content="${id}"]`);
    if (modal) {
      modal.classList.add('active');
      const canvas = modal.querySelector('#captcha');
      if (canvas && typeof generateCaptcha === 'function') generateCaptcha();
    }
  }

  if (e.target.closest('.simple-close') || e.target.classList.contains('simple-modal')) {
    e.target.closest('.simple-modal')?.classList.remove('active');
  }
});

document.addEventListener('keydown', e => {
  if (e.key === 'Escape') {
    document.querySelectorAll('.simple-modal.active').forEach(m => m.classList.remove('active'));
  }
});