# Modal Components
> Modal patterns: confirm dialog, form modal, image gallery, notification toast, and bottom sheet
> 모달 패턴: 확인 다이얼로그, 폼 모달, 이미지 갤러리, 알림 토스트, 바텀 시트
**Category**: Components | **Tags**: modal, dialog, toast, popup, tailwind | **Difficulty**: Intermediate
## Preview
```
+-------- Confirm Dialog ---------+
| Are you sure? |
| This action cannot be undone. |
| [Cancel] [Delete] |
+---------------------------------+
+--- Toast Notifications ---+
| [OK] File saved |
| [WARN] Low storage |
| [ERR] Upload failed |
+---------------------------+
```
## Quick Start
```bash
# 1. Copy any modal component you need
# 2. Modals use vanilla JS (onclick toggle) - no framework required
# 3. Use data-modal-target for multiple modals on one page
```
## Full Code
```html
Modal Components
Modal Components
⚠
Delete Project?
This action cannot be undone. All data associated with this project will be permanently removed.
Create New Task
🖼
Image preview placeholder
Replace with <img> tag
Photo 1 of 5 - Mountain Landscape
Share this page
```
## Customization Guide
- **Confirm modal**: Change icon, title, and button text/colors for different actions (delete, archive, logout)
- **Form modal**: Add more fields; wire form submission to your API with `fetch()`
- **Gallery**: Replace placeholder with `` elements; add prev/next logic with JS array index
- **Toasts**: Adjust position (`top-4 right-4`) to `bottom-4 left-4` or centered
- **Bottom sheet**: Change max-height with `max-h-[70vh]`; add drag-to-dismiss with touch events
- **Animations**: Adjust timing in CSS transitions for faster/slower open/close
## 2026 Trend Notes
- Modals use `fixed inset-0` with flex centering (no absolute positioning math)
- Click-outside-to-close on backdrop is standard UX expectation
- Toast notifications auto-dismiss after 4 seconds with smooth slide-in animation
- Bottom sheets (mobile pattern) are increasingly used on desktop for contextual actions
- Separate header/body/footer in form modals follows dialog best practices