Confirmation Modal

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

<!-- Confirmation Modal -->
<div id="confirmation-modal" class="fixed inset-0 z-50 hidden">
  <!-- Backdrop -->
  <div class="fixed inset-0 bg-black/50 backdrop-blur-sm transition-opacity" onclick="closeModal('confirmation-modal')"></div>
  
  <!-- Modal Container -->
  <div class="fixed inset-0 flex items-center justify-center p-4">
    <div class="relative bg-white dark:bg-gray-900 rounded-2xl shadow-2xl w-full max-w-md transform transition-all" role="alertdialog" aria-modal="true" aria-labelledby="confirmation-modal-title" aria-describedby="confirmation-modal-desc">
      
      <!-- Warning Icon -->
      <div class="flex justify-center mt-8">
        <div class="w-16 h-16 bg-amber-100 dark:bg-amber-900/30 rounded-full flex items-center justify-center">
          <svg class="w-8 h-8 text-amber-600 dark:text-amber-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
          </svg>
        </div>
      </div>
      
      <!-- Content -->
      <div class="p-6 text-center">
        <h3 id="confirmation-modal-title" class="text-xl font-semibold text-gray-900 dark:text-white mb-2">Are you sure?</h3>
        <p id="confirmation-modal-desc" class="text-gray-600 dark:text-gray-400 leading-relaxed">This action will affect your account settings and cannot be undone. Please confirm you want to proceed.</p>
      </div>
      
      <!-- Actions -->
      <div class="flex items-center justify-center gap-3 p-6 pt-0">
        <button onclick="closeModal('confirmation-modal')" class="px-6 py-3 text-sm font-medium text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-gray-800 rounded-xl hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors focus:outline-none focus:ring-2 focus:ring-gray-300">Cancel</button>
        <button onclick="closeModal('confirmation-modal')" class="px-6 py-3 text-sm font-medium text-white bg-amber-600 rounded-xl hover:bg-amber-700 transition-colors focus:outline-none focus:ring-2 focus:ring-amber-500 shadow-lg shadow-amber-500/30">Confirm Action</button>
      </div>
    </div>
  </div>
</div>

<!-- Demo Trigger Button -->
<button onclick="openModal('confirmation-modal')" class="px-6 py-3 bg-gray-900 dark:bg-gray-100 text-white dark:text-gray-900 font-medium rounded-xl hover:bg-gray-800 dark:hover:bg-gray-200 transition-colors focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2">Open Confirmation Modal</button>

1
2
3
4
5
6
7
8
9
10
11
12

# Confirmation Modal

Confirm / cancel dialog.

## Usage
```bash
npx devsnips add Tailwind/Components/Modals/confirmation-modal
```
Copy from `code.html`.

## File Structure
`code.html` · `preview.html` · `metadata.json` · `README.md`