# Modal · MIAN

A dialog on the native <dialog> element: focus trap, Escape, inert background and focus return from the platform.

- Id: `modal` · Category: Overlays · Needs mian.js: yes · License: MIAN License (free to use)
- Docs: https://mian.ro/components/modal
- Use for: dialog, popup, confirm dialog, modal form, lightbox.

Use only the classes below and copy the examples' structure and ARIA; change the words. Check your markup at https://mian.ro/api/v1/validate.

## Install

```html
<link rel="stylesheet" href="https://mian.ro/dist/mian.css">
<script src="https://mian.ro/dist/mian.js" defer></script>
```

## Classes

- `dialog.mn-modal`: The dialog.
- `mn-modal-header · mn-modal-title · mn-modal-description · mn-modal-body · mn-modal-footer`: Parts.
- `mn-modal-sm · mn-modal-lg · mn-modal-full`: Sizes.
- `mn-modal-sheet`: Becomes a bottom sheet on phones.
- `data-mn-open="id" · data-mn-close`: Open and close triggers.
- `data-mn-static`: Ignore backdrop clicks and Escape, for flows that must be completed.
- `mn-close`: The × button.

## Accessibility

- showModal() makes everything else inert and traps focus. mian.js sets aria-labelledby from the title.
- For destructive confirmations add role="alertdialog" and put focus on the least destructive button with autofocus.

## Examples

### Edit profile

```html
<button class="mn-btn mn-btn-outline" data-mn-open="dlg-profile">Edit profile</button>
<dialog class="mn-modal mn-modal-sheet" id="dlg-profile">
  <div class="mn-modal-header">
    <div><h2 class="mn-modal-title">Edit profile</h2><p class="mn-modal-description">Make changes to your profile here. Click save when you're done.</p></div>
    <button class="mn-close" data-mn-close aria-label="Close"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 6 6 18M6 6l12 12"/></svg></button>
  </div>
  <form class="mn-modal-body mn-form" method="dialog" id="dlg-profile-form">
    <div class="mn-field"><label class="mn-label" for="dp-n">Name</label><input class="mn-input" id="dp-n" value="Ana Popescu"></div>
    <div class="mn-field"><label class="mn-label" for="dp-u">Username</label><input class="mn-input" id="dp-u" value="@ana"></div>
  </form>
  <div class="mn-modal-footer"><button class="mn-btn mn-btn-outline" data-mn-close>Cancel</button><button class="mn-btn" form="dlg-profile-form" value="save">Save changes</button></div>
</dialog>
```

### Confirmation

```html
<button class="mn-btn mn-danger" data-mn-open="dlg-del">Delete account</button>
<dialog class="mn-modal mn-modal-sm" id="dlg-del" role="alertdialog" aria-describedby="dlg-del-d">
  <div class="mn-modal-header"><h2 class="mn-modal-title">Delete account?</h2></div>
  <div class="mn-modal-body" id="dlg-del-d">This permanently deletes your account and all of its data. This cannot be undone.</div>
  <div class="mn-modal-footer"><button class="mn-btn mn-btn-outline" data-mn-close autofocus>Cancel</button><button class="mn-btn mn-danger" data-mn-close="delete">Delete</button></div>
</dialog>
```

## Source

Already inside mian.css and mian.js; you do not need it to use the component. To vendor or customise: https://mian.ro/api/v1/components/modal/source