Unsaved Changes Guard — Confirm Discard Before Closing a Dirty Modal

<div class="demo">
  <button class="open-btn" id="openBtn">Edit profile</button>

  <div class="overlay" id="overlay">
    <div class="modal" role="dialog" aria-modal="true" aria-labelledby="modalTitle">
      <h2 id="modalTitle">Edit profile</h2>
      <div class="f-row">
        <label for="editName">Name</label>
        <input type="text" id="editName" value="Jordan Lee" />
      </div>
      <div class="f-row">
        <label for="editBio">Bio</label>
        <textarea id="editBio" rows="3">Product designer based in Toronto.</textarea>
      </div>
      <div class="modal-actions">
        <button class="btn ghost" id="cancelBtn">Cancel</button>
        <button class="btn primary" id="saveBtn">Save</button>
      </div>
      <button class="modal-x" id="closeX" aria-label="Close">×</button>
    </div>
  </div>

  <div class="overlay confirm-overlay" id="confirmOverlay">
    <div class="modal confirm-modal" role="alertdialog" aria-modal="true" aria-labelledby="confirmTitle">
      <h3 id="confirmTitle">Discard changes?</h3>
      <p>You have unsaved edits to this profile. Closing now will lose them.</p>
      <div class="modal-actions">
        <button class="btn ghost" id="keepEditingBtn">Keep editing</button>
        <button class="btn danger" id="discardBtn">Discard changes</button>
      </div>
    </div>
  </div>
</div>

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: system-ui, sans-serif; background: #f8fafc; display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 24px; }
.demo { position: relative; }
.open-btn { padding: 10px 20px; border: none; border-radius: 10px; background: #4f46e5; color: #fff; font-size: 13.5px; font-weight: 700; cursor: pointer; font-family: inherit; }
.open-btn:hover { background: #4338ca; }

.overlay { position: fixed; inset: 0; background: rgba(15,23,42,0.45); display: none; align-items: center; justify-content: center; z-index: 50; }
.overlay.open { display: flex; }
.confirm-overlay { background: rgba(15,23,42,0.55); z-index: 60; }

.modal { width: 340px; max-width: calc(100vw - 40px); background: #fff; border-radius: 16px; padding: 22px; box-shadow: 0 24px 60px rgba(15,23,42,0.3); display: flex; flex-direction: column; gap: 12px; position: relative; }
.modal h2, .modal h3 { font-size: 15px; font-weight: 800; color: #111827; }
.modal p { font-size: 12.5px; color: #64748b; line-height: 1.6; }

.f-row { display: flex; flex-direction: column; gap: 5px; }
.f-row label { font-size: 12px; font-weight: 700; color: #334155; }
.f-row input, .f-row textarea { padding: 9px 11px; border: 1.5px solid #e2e8f0; border-radius: 9px; font-size: 13px; font-family: inherit; resize: vertical; }
.f-row input:focus-visible, .f-row textarea:focus-visible { outline: none; border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99,102,241,0.15); }

.modal-actions { display: flex; gap: 10px; margin-top: 4px; }
.btn { flex: 1; border: none; padding: 10px; border-radius: 9px; font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit; }
.btn.ghost { background: #f1f5f9; color: #334155; }
.btn.ghost:hover { background: #e2e8f0; }
.btn.primary { background: #4f46e5; color: #fff; }
.btn.primary:hover { background: #4338ca; }
.btn.danger { background: #dc2626; color: #fff; }
.btn.danger:hover { background: #b91c1c; }

.modal-x { position: absolute; top: 14px; right: 14px; border: none; background: transparent; font-size: 16px; color: #94a3b8; cursor: pointer; width: 24px; height: 24px; border-radius: 6px; }
.modal-x:hover { background: #f1f5f9; }

.confirm-modal { width: 300px; }

const openBtn = document.getElementById('openBtn');
const overlay = document.getElementById('overlay');
const closeX = document.getElementById('closeX');
const cancelBtn = document.getElementById('cancelBtn');
const saveBtn = document.getElementById('saveBtn');
const nameInput = document.getElementById('editName');
const bioInput = document.getElementById('editBio');

const confirmOverlay = document.getElementById('confirmOverlay');
const keepEditingBtn = document.getElementById('keepEditingBtn');
const discardBtn = document.getElementById('discardBtn');

// A snapshot of the "clean" (saved) state, taken fresh every time the modal
// opens. Dirtiness is always computed by comparing live field values against
// THIS snapshot — never a boolean flag flipped ad hoc on every keystroke,
// which would be easy to accidentally leave stuck in the wrong state.
let cleanSnapshot = null;

function snapshot() {
  return { name: nameInput.value, bio: bioInput.value };
}

function isDirty() {
  if (!cleanSnapshot) return false;
  return nameInput.value !== cleanSnapshot.name || bioInput.value !== cleanSnapshot.bio;
}

function openEditModal() {
  cleanSnapshot = snapshot();
  overlay.classList.add('open');
  nameInput.focus();
}

// The single gatekeeper every closing path must go through. It never closes
// anything itself — it only decides whether to proceed straight to closing,
// or to interrupt with the confirmation modal first.
function attemptClose() {
  if (isDirty()) {
    confirmOverlay.classList.add('open');
    keepEditingBtn.focus();
  } else {
    overlay.classList.remove('open');
  }
}

closeX.addEventListener('click', attemptClose);
cancelBtn.addEventListener('click', attemptClose);
overlay.addEventListener('click', (e) => { if (e.target === overlay) attemptClose(); });

document.addEventListener('keydown', (e) => {
  if (e.key !== 'Escape') return;
  if (confirmOverlay.classList.contains('open')) {
    // Escape on the confirmation itself is the safe choice: it cancels the
    // confirmation and returns to editing, never accidentally discards.
    confirmOverlay.classList.remove('open');
  } else if (overlay.classList.contains('open')) {
    attemptClose();
  }
});

saveBtn.addEventListener('click', () => {
  // A real save request would fire here. On success, the just-saved values
  // become the new clean baseline, so closing immediately afterward is
  // correctly treated as "no unsaved changes" rather than still-dirty.
  cleanSnapshot = snapshot();
  overlay.classList.remove('open');
});

keepEditingBtn.addEventListener('click', () => {
  confirmOverlay.classList.remove('open');
});

discardBtn.addEventListener('click', () => {
  // Restore the fields to the clean snapshot before actually closing, so
  // reopening the modal later doesn't show the discarded edits lingering.
  nameInput.value = cleanSnapshot.name;
  bioInput.value = cleanSnapshot.bio;
  confirmOverlay.classList.remove('open');
  overlay.classList.remove('open');
});

openBtn.addEventListener('click', openEditModal);