Alert Dialog

Modal that requires user attention and confirmation.

MDN: <dialog>

Remove item?

This action cannot be undone, and it will permanently delete the item from our systems without the ability to recover it.

The modern semantic approach used here has wide support in browsers, aside from some features of it not utilized here. However the addition of Javascript is required to toggle the modal (though, less than one-line), and because of this a different approach will be provided in future releases.

The alert dialog should only be used for actions that require user attention and confirmation. A regular dialog should be used for non-critical information or content.

Structure

The alert dialog is made out of semantic HTML, natively supported by browsers to trigger a modal without special styling.

It uses the <dialog> element, which is a native HTML element that provides a way to create modal dialogs, and has to be opened by using an id and showModal().

The dialog can contain any content, but it is recommended to use a <hgroup> element for the title and description, and a <form> element (as last child) for the buttons which is styled to automatically align to the right.

Built by ahme.dev. The source code is available on Github