Native HTML Dialogs

Native HTML dialogs have been around for a while eliminating the need to rely completely on JavaScript to create pop-up modals and dialogs.

A dialog is made up of three html elements; a open button (or event), the dialog element itself, and a close button (or event),

Dialog opening and closing are basic DOM methods therefore they can be invoked within event handlers

the HTMLDialogElement which is obtained from the document.getElementByTagName('dialog') or any other similar query method has two main methods which can be invoked;

• The showModal() method opens the dialog and displays it on the screen.
• The close() method closes the dialog (as you would expect).

 <dialog id="dialog">
       <h1>This is a dialog</h1>
     <button onclick="document.getElementById('dialog').close()">
     Close Dialog
     </button>
</dialog>

    <button onclick="document.getElementById('dialog').showModal()">
       Open Dialog
    </button>

Initially, a dialog element is not presented on the browser page, so the showModal() method needs to be invoked before the dialog is visible.

Additionally (for CSS), dialog elements also have a ::backdrop pseudo-element which represents and styles the background of the dialog.

It is a common practice to set the background color (of the dialog::backdrop element) to a dark-grey-black colour with a medium-high transparency to increase readability and prevent obstruction from underlying content..

dialog::backdrop {
    background-color: #21212150;
}

Even though dialogs are block elements, they do (and should) not respect the position of other elements. (You would want them at the center of the page).

Svelte

In Svelte, there is a feature called element binding. This feature uses the bind:this={variable} construct to bind an html element to a variable (the variable is undefined until the element is mounted), which is more convenient (and live).

<script lang="ts">
    let dialog: HTMLDialogElement;
</script>

<dialog bind:this={dialog}>
     <h1>This is a dialog</h1>
     <button onclick={() => {dialog.close()}}>
     Close Dialog
     </button>
</dialog>

    <button onclick={() => {dialog.showModal()}}>
       Open Dialog
    </button>

We are using typescript annotations and we used it to automatically initialize the type of dialog as HTMLDialogElement

The functions in the onclick attribute of the open and close buttons, opens and closes the dialog with the appropriate Vanilla DOM methods.

If you have any additional questions or suggestions on how native html dialogs might be useful, please mention them in the comments below 🌟