webdevpuneet.com

Related Snippets

86 in Modals category
1–6 of 60

Micromodal Accessible Modal (Focus Trap Verified)

Notyf Minimal Toast Variants

Toastify Notification Stack with Undo

SweetAlert2 Multi-Step Input Flow

SweetAlert2 Confirmation Dialog Set

Floating UI Anchored Popover in a Scroll Container

Confirm Dialog — Type to Confirm HTML CSS JS Snippet

Confirm Dialog · Modals · Plain HTML, CSS & JS · Live preview

CategoryModals
TagsKeyboard NavigationSVGGlassmorphismDeveloper Tools

Copy & paste

Source Code

<div class="cd-page">
  <button class="cd-trigger" onclick="openDialog()">
    <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2m2 0v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/></svg>
    Delete project
  </button>

  <div class="cd-overlay" id="cdOverlay" onclick="overlayClick(event)">
    <div class="cd-dialog" role="alertdialog" aria-modal="true" aria-labelledby="cdTitle">
      <div class="cd-icon">
        <svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="#dc2626" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 9v4m0 4h.01M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z"/></svg>
      </div>
      <h2 class="cd-title" id="cdTitle">Delete this project?</h2>
      <p class="cd-text">This permanently deletes <strong>aurora-api</strong> and all of its deployments, logs, and secrets. This action <strong>cannot be undone</strong>.</p>

      <label class="cd-label">Type <code id="cdPhrase">aurora-api</code> to confirm</label>
      <input class="cd-input" id="cdInput" type="text" placeholder="aurora-api" autocomplete="off" spellcheck="false" oninput="checkPhrase(this)">

      <div class="cd-actions">
        <button class="cd-cancel" onclick="closeDialog()">Cancel</button>
        <button class="cd-confirm" id="cdConfirm" onclick="confirmDelete()" disabled>Delete project</button>
      </div>
    </div>
  </div>
</div>

Extend with AI

Take This Snippet Further With AI

The AI prompt for this one is for Patreon supporters ($3 a month), along with a site with no ads. Supporters enter the passcode once and it is remembered in this browser.

· Become a supporter

What's included

Features

Type-to-confirm guard
checkPhrase enables Delete only when the input exactly matches the required phrase, forcing deliberate intent.
Markup as source of truth
The required phrase is read from the on-screen <code>, so changing the displayed name updates the check automatically.
Match feedback
The input border turns green on a match, giving immediate confirmation that the name is correct before clicking.
Blurred modal overlay
backdrop-filter: blur dims and frosts the page; the dialog scales/slides in with transform+opacity for a smooth, export-safe entrance.
Three dismissal paths
Cancel, backdrop click (guarded by e.target === overlay), and Escape all route through closeDialog.
Deleting→done sequence
confirmDelete transitions the button through "Deleting…" and "✓ Deleted", a clear async lifecycle stand-in.
Re-entrancy lock
A busy flag blocks dismissal and repeat clicks during the delete sequence so the action cannot double-fire.
Auto-focus and reset
Opening focuses the input; closing clears the field, match style, and button label so the guard is fresh on reopen.

About this UI Snippet

Confirm Dialog — Type-to-Confirm Guard, Backdrop Blur & Deleting→Done State

Screenshot of the Confirm Dialog snippet rendered live

For genuinely destructive actions — deleting a project, dropping a database, closing an account — a plain "Are you sure? [OK]" is too easy to click through on autopilot. The stronger pattern, used by GitHub, Stripe, and Vercel, is type-to-confirm: the user must type the exact name of the thing being destroyed before the confirm button unlocks. That deliberate friction is the point. This snippet implements it in plain HTML, CSS, and vanilla JavaScript: a type-to-confirm guard, a blurred modal overlay, the standard dismissal behaviours, and a deleting→done state.

The type-to-confirm guard

The Delete button starts disabled. checkPhrase runs on every keystroke and compares the trimmed input against the required PHRASE (read from the on-screen <code> so the markup is the source of truth). Only an exact match enables the button and turns the input border green. This forces the user to consciously read and reproduce the resource's name, which all but eliminates accidental deletions and "muscle-memory" confirmations — the entire reason the pattern exists.

A real modal, dismissed the expected ways

The dialog uses role="alertdialog" and aria-modal, with a blurred, dimmed overlay (backdrop-filter: blur). It animates in by scaling and sliding from scale(.94) to scale(1) with opacity — transform/opacity only, so it is smooth and exports cleanly. It can be dismissed three ways: the Cancel button, clicking the backdrop (overlayClick checks e.target === overlay so clicks inside the dialog do not close it), and pressing Escape. Every dismissal path runs closeDialog, which also resets the input and re-disables the button so the guard is fresh next time.

Deleting → done state with a re-entrancy lock

On confirm, confirmDelete switches the button to "Deleting…", then to a green "✓ Deleted", then closes — standing in for an async request. A busy flag locks the dialog during this sequence so Escape, the backdrop, and repeat clicks cannot interrupt or double-fire the action mid-delete. Once finished, closeDialog fully resets the dialog for reuse.

Focus and reset

Opening the dialog focuses the input after the animation so the user can start typing immediately, and closing clears the field, the match style, and the button label — so reopening always presents a clean, locked confirm.

Wire your real delete call into confirmDelete (before the success state) and you have a production-grade safeguard. Pair this with a slide to confirm for an alternative deliberate gesture, a snackbar with undo for reversible deletes, or a modal for non-destructive dialogs.

Step by step

How to Use

  1. 1
    Paste HTML, CSS, and JSA red "Delete project" button appears; clicking it opens a blurred modal asking you to type the project name.
  2. 2
    See the locked confirmThe Delete button inside the dialog is disabled — you cannot click it until you prove intent.
  3. 3
    Type the phraseType aurora-api exactly — the input border turns green and the Delete button unlocks the moment it matches.
  4. 4
    ConfirmClick Delete — it shows "Deleting…", then a green "✓ Deleted", then the dialog closes.
  5. 5
    Dismiss itCancel, click the dimmed backdrop, or press Escape to close without deleting; the guard resets for next time.
  6. 6
    Wire your actionPut your real delete API call in confirmDelete before the success state — it only runs once the typed name matches.

Real-world uses

Common Use Cases

Delete project / repo / database
The canonical GitHub/Vercel-style guard for irreversible resource deletion in dashboards and admin tools.
Account closure and data wipes
Require typing the account email or "DELETE" before permanently closing an account or erasing data.
Production / billing changes
Guard high-stakes settings (cancel subscription, rotate keys, drop a table) where an accidental click is costly. Often paired with a subscription widget.
Bulk destructive operations
Confirm mass deletes or irreversible migrations; pair with a snackbar with undo where reversibility is possible.
Transfer and ownership changes
Type the target name to confirm transferring ownership of a project or organisation.
Alternative to slide-to-confirm
Where typing fits better than a gesture; compare with a slide to confirm control for touch-first flows.
Related: Bulk Action Confirm Dialog — Undo Countdown
See the Bulk Action Confirm Dialog — Undo Countdown for a related modals pattern worth pairing with this one.

Got questions?

Frequently Asked Questions

Put your API call inside confirmDelete before showing the success state: keep the busy lock set, await the request, then switch to "✓ Deleted" and close on success. On failure, clear busy, restore the button label, and show an error message instead of closing — so the user can retry without losing the dialog.

The phrase is read from the #cdPhrase element's text, so render the actual resource name into both that <code> and the warning text when you open the dialog. checkPhrase compares against whatever is shown, so per-item dialogs (deleting "billing-prod" vs "aurora-api") work with no code change.

By default this matches exactly (case-sensitive), which is the safest and matches GitHub's behaviour — it forces careful reproduction. If your resource names are case-insensitive, compare with .toLowerCase() on both sides. Keep the trim (already applied) so trailing spaces from autocomplete do not block a correct match.

It uses role="alertdialog" and aria-modal with an aria-labelledby pointing at the title. For full compliance, trap focus inside the dialog while open (cycle Tab between the input and buttons), return focus to the trigger on close, and ensure Escape closes it (it does). The green match state should be paired with the unlocked button, not colour alone, so the cue is not purely visual.

In React, hold open, the typed value, and a busy flag in useState; derive the button's disabled state from value === phrase, and add an Escape useEffect. In Vue, use refs with v-model and a computed match. In Angular, track state on the component and bind [disabled]. The overlay/scale-in CSS and guard logic port unchanged.