Modal with different styles - No external template

by davidxmartins

HTML

<h1>Click anything – each modal looks completely different</h1>

<button data-open-modal="test">Open Resale Form (Dark Red)</button>
<p data-open-modal="privacy" style="display:inline; background:#333; padding:10px;">Click this paragraph → Privacy Policy (White)</p>
<span data-open-modal="video">Watch Video (Fullscreen Black)</span>
<a href="#" data-open-modal="success">Success Message (Green)</a>

<!-- MODAL 1 – red -->
<div class="simple-modal test-modal" data-modal-id="test">
  <div class="simple-box">
    <button type="button" class="simple-close" aria-label="Close">×</button>
    <div class="simple-inner">
      <h2>Revenda</h2>
      <p>This modal has a dark red background and big white text.</p>
      <canvas id="captcha1" width="200" height="60" style="background:#900; margin:20px 0;"></canvas>
      <input type="text" placeholder="Enter code">
    </div>
  </div>
</div>

<!-- MODAL 2 – Privacy (white) -->
<div class="simple-modal privacy-modal" data-modal-id="privacy">
  <div class="simple-box">
    <button type="button" class="simple-close" aria-label="Close">×</button>
    <div class="simple-inner">
      <h2>Privacy Policy</h2>
      <p>This one is clean white with black text.</p>
      <p>Everything is instantly obvious.</p>
    </div>
  </div>
</div>

<!-- MODAL 3 – Video -->
<div class="simple-modal video-modal" data-modal-id="video">
  <div class="simple-box">
    <button type="button" class="simple-close" aria-label="Close">×</button>
    <div class="simple-inner">
      <iframe width="100%" height="500" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allowfullscreen></iframe>
    </div>
  </div>
</div>

<!-- MODAL 4 – Success -->
<div class="simple-modal success-modal" data-modal-id="success">
  <div class="simple-box">
    <button type="button" class="simple-close" aria-label="Close">×</button>
    <div class="simple-inner">
      <h2>Success!</h2>
      <p>Your action was...

CSS

body { font-family: system-ui; background:#111; color:#eee; padding:50px; line-height:1.7; }
button, p, span, a { margin: 30px;}

  /* Base modal styles – shared by ALL */
  .simple-modal {
    position:fixed; inset:0; background:rgba(0,0,0,0.9);
    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; width:90%; max-width:760px; max-height:90vh;
    border-radius:20px; padding:60px; box-sizing:border-box;
    transform:scale(0.92); transition:transform .35s ease;
    overflow:auto;
  }
  .simple-modal.show .simple-box { transform:scale(1); }

  .simple-close {
    position:absolute; top:20px; right:25px;
    background:none; border:none; color:#fff; font-size:50px;
    cursor:pointer; width:60px; height:60px;
    display:grid; place-items:center; border-radius:50%;
  }
  .simple-close:hover { background:rgba(255,255,255,.2); }

  /* DIFFERENT STYLES – just add a unique class to the modal */
  .test-modal .simple-box   { background:#c21616; color:#fff; }
  .privacy-modal .simple-box  { background:#fff; color:#000; padding:50px; }
  .video-modal .simple-box    { background:#000; padding:0; border-radius:0; max-width:90%; }
  .success-modal .simple-box  { background: green; color:#fff; text-align: center; }

  /* Make any element clickable */
  [data-open-modal] { cursor:pointer; color:#0af; text-decoration:underline; }

JavaScript

// ONE UNIVERSAL SCRIPT – works for ALL modals forever
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-modal-id="${id}"]`);
    if (modal) {
      modal.classList.add('show');
      // Redraw captchas if present
      modal.querySelectorAll('canvas').forEach(canvas => {
        if (typeof generateCaptcha === 'function') generateCaptcha(canvas);
      });
    }
  }

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

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