Modal
A dialog on the native <dialog> element: focus trap, Escape, inert background and focus return from the platform.
Edit profile
<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
<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>Installation
Everything ships in one stylesheet and one small script. There is nothing to import per component.
<link rel="stylesheet" href="https://mian.ro/dist/mian.css">
<script src="https://mian.ro/dist/mian.js" defer></script>Prefer to own the files? /r/modal.json is a registry item with this component's CSS and example markup, ready to copy into your project with any tool that reads the open registry-item format.
Class reference
| Class / attribute | Description |
|---|---|
| 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.