• Uses modern Html <dialog> tag.
• Can be used to display static content, or content from url.
• Manages autofocus; when opened from keyboard, the close button will be focused.
• Styles for media, e.g. images and video.
• Executes <script> tags from relative urls.

• Include the compiled css file in the Html: <link href="/css/components/dialog.min.css" rel="stylesheet" />
• Include the compiled javascript file in the Html: <script src="/javascript/dialog.min.js"></script>

Basic

Set the data-dialog attribute of an element. The component will automatically determine which action to take based on the attribute value. The attribute can contain:

• Html
• Url
• A selector to an element within the document
• Empty - get url from href attribute (<a> tag)

Advanced

The dialog can also be implemented programatically, via javascript. Useful functions for opening a dialog are:

• dialog.open.html(code); - Show html.
• dialog.open.element(selector); - Show html from the first element within the document that matches the specified selector.
• dialog.open.url(href); - Fetch html from url.