Modal with different styles - PRODUCTION

by davidxmartins

HTML

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

<a href="#" data-open-modal="green">Modal Green</a>

<!-- GREEN MODAL -->
<div class="simple-modal green-modal" data-modal-id="green">
  <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 completed.</p>
    </div>
  </div>
</div>

<a href="#" data-open-modal="blue">Modal Blue</a>

<!-- BLUE MODAL -->
<div class="simple-modal blue-modal" data-modal-id="blue">
  <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 completed.</p>
    </div>
  </div>
</div>

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:20px; 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:10px; right:15px;
    background:none; border:none; color:#fff; font-size:30px;
    cursor:pointer; width:40px; height:40px;
    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 */
  .green-modal .simple-box  { background: green; color:#fff; text-align: center; }
  .blue-modal .simple-box  { background: rgb(54, 85, 170); color:#fff; text-align: left; border-radius:0; padding:20px;}
 .blue-modal 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%;
  }
  /* Make any element clickable */
  [data-open-modal] { cursor:pointer; }

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'));
  }
});