Bootstrap Unsaved Changes Alert — Free HTML CSS JS Snippet

<div class="container py-5 d-flex justify-content-center">
  <div class="card bsuca-card">
    <div class="card-body p-4">
      <div class="d-flex justify-content-between align-items-center mb-3">
        <h5 class="fw-bold mb-0">Profile settings</h5>
        <button type="button" class="btn btn-sm btn-outline-secondary" id="bsucaLeave">&larr; Back to dashboard</button>
      </div>

      <div class="mb-3">
        <label class="form-label small fw-semibold">Display name</label>
        <input type="text" class="form-control" id="bsucaName" value="Priya Nair">
      </div>
      <div class="mb-3">
        <label class="form-label small fw-semibold">Bio</label>
        <textarea class="form-control" id="bsucaBio" rows="3">Frontend engineer. Building small, fast things.</textarea>
      </div>

      <div class="d-flex align-items-center gap-2">
        <button type="button" class="btn btn-dark fw-bold" id="bsucaSave">Save changes</button>
        <span class="small" id="bsucaStatus">No changes yet</span>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="bsucaModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title fw-bold">Unsaved changes</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        <p class="mb-0">You've edited this form but haven't saved. Leaving now will discard those changes.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Keep editing</button>
        <button type="button" class="btn btn-outline-danger" id="bsucaDiscard">Discard &amp; leave</button>
        <button type="button" class="btn btn-dark fw-bold" id="bsucaSaveLeave">Save &amp; leave</button>
      </div>
    </div>
  </div>
</div>

.bsuca-card { width: 420px; max-width: 100%; border: 1px solid #eceef1; border-radius: 14px; }
#bsucaStatus.text-warning { color: #b45309 !important; }
#bsucaStatus.text-success { color: #198754 !important; }

const nameInput = document.getElementById('bsucaName');
const bioInput = document.getElementById('bsucaBio');
const saveBtn = document.getElementById('bsucaSave');
const leaveBtn = document.getElementById('bsucaLeave');
const status = document.getElementById('bsucaStatus');
const modalEl = document.getElementById('bsucaModal');
const modal = new bootstrap.Modal(modalEl);

let isDirty = false;
let savedName = nameInput.value;
let savedBio = bioInput.value;

function markDirty() {
  isDirty = true;
  status.textContent = 'Unsaved changes';
  status.className = 'small text-warning fw-semibold';
}

function save() {
  savedName = nameInput.value;
  savedBio = bioInput.value;
  isDirty = false;
  status.textContent = 'Saved';
  status.className = 'small text-success fw-semibold';
}

[nameInput, bioInput].forEach(el => el.addEventListener('input', markDirty));

saveBtn.addEventListener('click', save);

// The real, page-leaving protection: a native confirmation the browser itself
// shows when a tab is closed or a full navigation happens while isDirty is
// still true. It won't visibly fire inside this sandboxed preview, but this
// is the exact line a real page needs.
window.addEventListener('beforeunload', e => {
  if (!isDirty) return;
  e.preventDefault();
  e.returnValue = '';
});

// The in-page nav we can actually demo: clicking "Back to dashboard" is
// treated as a same-app navigation, so it goes through the modal instead of
// a full page load, and only when there is something to lose.
leaveBtn.addEventListener('click', () => {
  if (!isDirty) {
    status.textContent = 'Left the page';
    status.className = 'small text-muted';
    return;
  }
  modal.show();
});

document.getElementById('bsucaDiscard').addEventListener('click', () => {
  nameInput.value = savedName;
  bioInput.value = savedBio;
  isDirty = false;
  status.textContent = 'Left the page (changes discarded)';
  status.className = 'small text-muted';
  modal.hide();
});

document.getElementById('bsucaSaveLeave').addEventListener('click', () => {
  save();
  status.textContent = 'Saved, then left the page';
  status.className = 'small text-muted';
  modal.hide();
});