Dialog
Dialog is a native web component that wraps the HTML dialog element to display content in a modal window, with backdrop, focus capture, and ESC-to-close included out of the box. Use it when you need to interrupt the flow to require an action or confirmation from the user, such as quick forms, alerts, or confirmation dialogs. Open and close it programmatically with the open() and close() methods or via the open attribute.
Preview
<button id="abrir-dialog">Open dialog</button>
<pura-dialog id="meu-dialog" title="Confirm deletion">
<p>Are you sure you want to delete this item? This action cannot be undone.</p>
<div slot="footer">
<button id="cancelar-dialog">Cancel</button>
<button id="confirmar-dialog">Delete</button>
</div>
</pura-dialog>
<script type="module">
const dlg = document.getElementById("meu-dialog");
document.getElementById("abrir-dialog").addEventListener("click", () => dlg.open());
document.getElementById("cancelar-dialog").addEventListener("click", () => dlg.close());
document.getElementById("confirmar-dialog").addEventListener("click", () => dlg.close());
</script>Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
open | boolean | false | Controls the visibility of the modal; when present, opens the dialog in modal mode. |
title | string | "" | Text shown in the header when the header slot is not used. |
Installation
pura is copy-paste and dependency-free. Load the whole library, or just this component.
<link rel="stylesheet" href="/pura/tokens.css">
<script type="module" src="/pura/lib/dialog.js"></script>import "./pura/lib/dialog.js";