Simple modal with external template - different styles

by davidxmartins

HTML

<h1>Click any link – completely different modals from ONE template</h1>

<a href="#" data-modal="privacy">Privacy Policy (light)</a> |
<a href="#" data-modal="resale">Resale Form (dark)</a> |
<a href="#" data-modal="video">Video (fullscreen)</a> |
<a href="#" data-modal="success">Success Message (green)</a>

<!-- ONE AND ONLY MODAL TEMPLATE (put this in footer.php) -->
<div id="mainModal" class="simple-modal">
  <div class="simple-box">
    <button type="button" class="simple-close" aria-label="Close">×</button>
    <div class="simple-content"></div>
  </div>
</div>

<!-- Hidden content with its own styling wrapper -->
<div style="display:none">
  <!-- Light / legal style -->
  <div id="modal-privacy">
    <div class="style-light">
      <h2>Privacy Policy</h2>
      <p>We respect your data. This modal has a white background and normal padding.</p>
      <p><a href="#">Learn more</a></p>
    </div>
  </div>

  <!-- Dark resale form -->
  <div id="modal-resale">
    <div class="style-dark">
      <h2>Resale Inquiry</h2>
      <form style="margin-top:30px;">
        <input type="text" placeholder="Your name" style="width:100%; padding:12px; margin:10px 0;"><br>
        <canvas id="captcha" width="200" height="60" style="background:#333; border:1px solid #666; display:block; margin:15px 0;"></canvas>
        <input type="text" placeholder="Enter code" style="width:200px; padding:12px;"><br><br>
        <button type="submit" style="padding:12px 30px; background:#0a0; color:#000; border:none; font-weight:bold;">Submit</button>
      </form>
    </div>
  </div>

  <!-- Video modal -->
  <div id=" |modal-video">
    <div class="style-video">
      <iframe width="100%" height="500" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allowfullscreen></iframe>
    </div>
  </div>

  <!-- Success modal -->
  <div id="modal-success">
    <div class="style-success">
      <h2>Success!</h2>
      <p>Your request has...

CSS

body { font-family: system-ui, sans-serif; background:#f0f0f0; padding:40px; line-height:1.6; }
a { color:#0066cc; text-decoration:underline; margin-right:15px; }

/* Modal base */
.simple-modal {
  position:fixed; inset:0; background:rgba(0,0,0,0.8);
  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:720px; max-height:90vh;
  border-radius:16px; overflow:hidden; transform:scale(0.92);
  transition:transform .35s ease;
}
.simple-modal.show .simple-box { transform:scale(1); }

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

/* STYLES — applied by the wrapper inside the content */
.style-light   { background:#fff; color:#000; padding:48px; border-radius:16px; }
.style-light .simple-close { color:#000000; }
.style-dark    { background:#111; color:#fff; padding:70px; border-radius:20px; }
.style-video   { background:#000; padding:0; }
.style-success { background:#0a0; color:#fff; padding:60px; text-align:center; font-size:1.2em; }

JavaScript

// ONE SCRIPT — 15 lines, no magic
document.addEventListener('DOMContentLoaded', () => {
  const modal = document.getElementById('mainModal');
  const content = modal.querySelector('.simple-content');

  document.addEventListener('click', e => {
    const trigger = e.target.closest('[data-modal]');
    if (trigger) {
      e.preventDefault();
      const id = trigger.dataset.modal;
      const source = document.getElementById('modal-' + id);
      if (source) {
        content.innerHTML = source.innerHTML;
        modal.classList.add('show');

        // Fix canvas
        const canvas = content.querySelector('#captcha');
        if (canvas) setTimeout(generateCaptcha, 50);
      }
    }

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

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

// Dummy captcha for demo
function generateCaptcha() {
  const canvas = document.getElementById('captcha');
  if (!canvas) return;
  const ctx = canvas.getContext('2d');
  ctx.fillStyle = '#333';
  ctx.fillRect(0,0,200,60);
  ctx.font = '40px Arial';
  ctx.fillStyle = '#0f0';
  ctx.fillText('XY99', 50, 45);
}