# Modal

> 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.

- Skill: `bytesagain/modal` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add bytesagain/modal`
- Raw SKILL.md: https://api.skillmd.com/api/skills/bytesagain/modal/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: bytesagain (https://skillmd.com/u/bytesagain)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/bytesagain/modal

---


# 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*