Bootstrap Type-to-Confirm Delete Modal — Free Snippet

<div class="container py-5 text-center">
  <button class="btn btn-outline-danger" data-bs-toggle="modal" data-bs-target="#bsdelModal">Delete project</button>
  <p class="small text-muted mt-3" id="bsdelResult"></p>
</div>

<div class="modal fade" id="bsdelModal" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header border-0">
        <h5 class="modal-title text-danger fw-bold">Delete "Northwind Marketing"?</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <p class="small text-muted">This permanently deletes the project, its 48 files, and cannot be undone.</p>
        <label class="form-label small">Type <strong>delete northwind-marketing</strong> to confirm.</label>
        <input type="text" class="form-control" id="bsdelInput" autocomplete="off">
      </div>
      <div class="modal-footer border-0">
        <button type="button" class="btn btn-light" data-bs-dismiss="modal">Cancel</button>
        <button type="button" class="btn btn-danger" id="bsdelConfirm" disabled>Delete project</button>
      </div>
    </div>
  </div>
</div>

#bsdelInput.is-valid { border-color: #16a34a; }

const PHRASE = 'delete northwind-marketing';
const modalEl = document.getElementById('bsdelModal');
const input = document.getElementById('bsdelInput');
const confirmBtn = document.getElementById('bsdelConfirm');
const result = document.getElementById('bsdelResult');

input.addEventListener('input', () => {
  const match = input.value.trim() === PHRASE;
  confirmBtn.disabled = !match;
  input.classList.toggle('is-valid', match);
});

confirmBtn.addEventListener('click', () => {
  result.textContent = 'Project "Northwind Marketing" was deleted.';
  bootstrap.Modal.getInstance(modalEl).hide();
});

// Every reopen starts from a clean, disabled state — a stale typed phrase
// from a previous open must never leave the confirm button pre-enabled.
modalEl.addEventListener('hidden.bs.modal', () => {
  input.value = '';
  input.classList.remove('is-valid');
  confirmBtn.disabled = true;
});