Multi-Step Modal — Wizard Dialog HTML CSS JS

<div class="ms-page"><button type="button" class="ms-open" id="msOpen">Set up workspace</button></div>

<div class="ms-backdrop" id="msBackdrop"></div>
<div class="ms-modal" id="msModal" role="dialog" aria-modal="true" aria-label="Setup wizard">
  <div class="ms-dots" id="msDots"></div>
  <div class="ms-viewport"><div class="ms-track" id="msTrack">
    <section class="ms-step"><h3>Welcome 👋</h3><p>Let us set up your workspace in three quick steps.</p></section>
    <section class="ms-step"><h3>Name it</h3><p>Pick a workspace name.</p><input type="text" placeholder="Acme Inc." class="ms-input"></section>
    <section class="ms-step"><h3>Invite team</h3><p>Add teammate emails (optional).</p><input type="text" placeholder="email, email…" class="ms-input"></section>
    <section class="ms-step ms-final"><div class="ms-check">✓</div><h3>All set!</h3><p>Your workspace is ready to go.</p></section>
  </div></div>
  <div class="ms-nav">
    <button type="button" class="ms-btn ms-ghost" id="msBack">Back</button>
    <button type="button" class="ms-btn" id="msNext">Next</button>
  </div>
</div>

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,-apple-system,sans-serif;background:#f1f5f9;min-height:100vh}
.ms-page{min-height:100vh;display:flex;align-items:center;justify-content:center}
.ms-open{background:#6366f1;color:#fff;border:none;border-radius:11px;padding:12px 24px;font-size:15px;font-weight:700;cursor:pointer;font-family:inherit}

.ms-backdrop{position:fixed;inset:0;background:rgba(15,23,42,.5);opacity:0;pointer-events:none;transition:opacity .25s;z-index:90}
.ms-backdrop.ms-show{opacity:1;pointer-events:all}
.ms-modal{position:fixed;left:50%;top:50%;transform:translate(-50%,-46%) scale(.97);opacity:0;pointer-events:none;
  width:min(400px,92vw);background:#fff;border-radius:18px;padding:24px;z-index:91;box-shadow:0 30px 70px rgba(15,23,42,.3);transition:opacity .26s,transform .26s}
.ms-modal.ms-show{opacity:1;transform:translate(-50%,-50%) scale(1);pointer-events:all}

.ms-dots{display:flex;gap:6px;justify-content:center;margin-bottom:18px}
.ms-dot{width:7px;height:7px;border-radius:50%;background:#e2e8f0;transition:background .2s,width .2s}
.ms-dot.ms-active{background:#6366f1;width:20px;border-radius:4px}
.ms-dot.ms-done{background:#a5b4fc}

.ms-viewport{overflow:hidden}
.ms-track{display:flex;transition:transform .35s cubic-bezier(.4,0,.2,1)}
.ms-step{min-width:100%;text-align:center;padding:6px 4px 4px}
.ms-step h3{font-size:19px;font-weight:800;color:#0f172a;margin-bottom:8px}
.ms-step p{font-size:13.5px;color:#64748b;line-height:1.55;margin-bottom:14px}
.ms-input{width:100%;border:1.5px solid #e2e8f0;border-radius:10px;padding:11px 13px;font-size:14px;font-family:inherit;color:#0f172a}
.ms-input:focus{outline:none;border-color:#6366f1;box-shadow:0 0 0 3px rgba(99,102,241,.15)}
.ms-final{display:flex;flex-direction:column;align-items:center}
.ms-check{width:54px;height:54px;border-radius:50%;background:#22c55e;color:#fff;font-size:26px;font-weight:800;display:flex;align-items:center;justify-content:center;margin-bottom:14px}

.ms-nav{display:flex;gap:10px;margin-top:22px}
.ms-btn{flex:1;background:#6366f1;color:#fff;border:none;border-radius:10px;padding:11px;font-size:14px;font-weight:700;cursor:pointer;font-family:inherit;transition:background .15s}
.ms-btn:hover{background:#4f46e5}
.ms-ghost{background:transparent;border:1.5px solid #e2e8f0;color:#475569}
.ms-ghost:hover{background:#f1f5f9}
.ms-ghost:disabled{opacity:.4;cursor:not-allowed}

var backdrop = document.getElementById('msBackdrop');
var modal = document.getElementById('msModal');
var track = document.getElementById('msTrack');
var dotsEl = document.getElementById('msDots');
var backBtn = document.getElementById('msBack');
var nextBtn = document.getElementById('msNext');
var steps = track.children.length;
var step = 0;

dotsEl.innerHTML = new Array(steps).fill('<span class="ms-dot"></span>').join('');
var dots = dotsEl.querySelectorAll('.ms-dot');

function update() {
  track.style.transform = 'translateX(-' + (step * 100) + '%)';
  dots.forEach(function (d, i) {
    d.classList.toggle('ms-active', i === step);
    d.classList.toggle('ms-done', i < step);
  });
  backBtn.disabled = step === 0;
  nextBtn.textContent = step === steps - 1 ? 'Done' : (step === steps - 2 ? 'Finish' : 'Next');
}

function open() {
  backdrop.classList.add('ms-show'); modal.classList.add('ms-show');
  step = 0; update();
}
function close() { backdrop.classList.remove('ms-show'); modal.classList.remove('ms-show'); }

nextBtn.addEventListener('click', function () {
  if (step < steps - 1) { step++; update(); }
  else close();   // last step "Done" closes the wizard
});
backBtn.addEventListener('click', function () { if (step > 0) { step--; update(); } });

document.getElementById('msOpen').addEventListener('click', open);
backdrop.addEventListener('click', close);
document.addEventListener('keydown', function (e) { if (e.key === 'Escape' && modal.classList.contains('ms-show')) close(); });