Modal
Modal is the base component for Dialog. It renders a backdrop and centers its content. Use Dialog for standard confirm/alert patterns.
Basic Modal
Open Modal
Modal Title
This is a basic modal. It closes when you click the backdrop or press Escape.
Close
Confirm
<me-button id="open-btn">Open Modal</me-button>
<me-modal id="my-modal">
<me-paper elevation="24" style="padding:32px">
<me-typography variant="h6">Title</me-typography>
<me-typography>Content...</me-typography>
</me-paper>
</me-modal>
<script>
document.getElementById('open-btn').onclick = () =>
document.getElementById('my-modal').setAttribute('open', '');
</script>
Disable Backdrop Click
Open (must close via button)
Locked Modal
Clicking the backdrop won't close this modal.
OK
<me-modal disable-backdrop-click>
...
</me-modal>
API
| Attribute | Type | Default | Description |
|---|
open | boolean | false | Shows the modal. |
disable-backdrop-click | boolean | false | Prevents closing on backdrop click. |
Events
| Event | Description |
|---|
me-close | Fired when the modal is closed via backdrop click or Escape key. |
