Just with basic usage, you get a centered modal dialog experience that comes up when you call it, a dimmed background, focus trapped within it, closes with the ESC key, and focus returning where it came from.
const showDialogButton = document.querySelector('.show-dialog-button'); const closeDialogButton = document.querySelector('.close-dialog-button'); const dialog = document.querySelector('dialog'); showDialogButton.addEventListener('click', () => { dialog.showModal(); }); closeDialogButton.addEventListener('click', () => { dialog.close(); });
By setting the <dialog> to position: relative;, something we naturally do when I'm thinking about using position: absolute; on a child element, we've introduced a potentially gnarly UX bug.
[
Collection
]
[
|
...
]