Modal

---
name: "modal"
version: "1.0.0"
description: "Modal dialog reference — accessible, performant modal windows for web and mobile. Use when building modal dialogs, understanding focus trapping, backdrop behavior, or implementing the HTML dialog element."
author: "BytesAgain"
homepage: "https://bytesagain.com"
source: "https://github.com/bytesagain/ai-skills"
tags: [modal, dialog, popup, overlay, accessibility, focus-trap, ui]
category: "frontend"
---

# Modal — Modal Dialog Reference

Quick-reference skill for modal dialogs — HTML dialog element, accessibility, focus management, and UI patterns.

## When to Use

- Building accessible modal dialogs for web applications
- Using the native HTML `<dialog>` element
- Implementing focus trapping and keyboard navigation
- Understanding modal vs non-modal (modeless) dialogs
- Handling backdrop clicks, escape key, and scroll locking

## Commands

### `intro`

```bash
scripts/script.sh intro
```

What modals are, modal vs modeless, when to use (and not use) modals.

### `html`

```bash
scripts/script.sh html
```

HTML `<dialog>` element — showModal, show, close, returnValue, forms.

### `accessibility`

```bash
scripts/script.sh accessibility
```

Modal accessibility — ARIA roles, focus trap, keyboard nav, screen readers.

### `focus`

```bash
scripts/script.sh focus
```

Focus management — trapping, restoring, tab order, inert attribute.

### `css`

```bash
scripts/script.sh css
```

Modal styling — backdrop, animations, responsive, scroll lock.

### `patterns`

```bash
scripts/script.sh patterns
```

Modal UI patterns — confirmation, form, wizard, lightbox, alert.

### `frameworks`

```bash
scripts/script.sh frameworks
```

Modal components in React, Vue, Angular — portals, composition, state.

### `antipatterns`

```bash
scripts/script.sh antipatterns
```

Modal anti-patterns: modal hell, breaking back button, scroll jank.

### `help`

```bash
scripts/script.sh help
```

### `version`

```bash
scripts/script.sh version
```

---

*Powered by BytesAgain | bytesagain.com | hello@bytesagain.com*