Opening and Closing Dialogs Without JavaScript Using HTML Invoker Commands

Learn how to use HTML invoker commands to open and close dialogs without writing any JavaScript.

Published on: Mon Dec 29 • Written by Schalk Neethling

The native <dialog> element was a huge step forward for web developers. It gave us a standardized way to create modal dialogs with built-in backdrop handling, focus management, and keyboard interactions—no more reinventing the wheel with div containers and mountains of JavaScript.

But we still needed JavaScript for one fundamental task: opening the dialog.

The HTML Invoker Commands API changes that. Now you can create fully functional dialogs with just HTML.

The Traditional Approach

Here’s what we typically had to write:

<pre class="astro-code dracula" style="background-color:#282A36;color:#F8F8F2; overflow-x: auto;" tabindex="0" data-language="html"><code><button type="button" id="openBtn">Open Dialog</button> <dialog id="dialog"> <form method="dialog"> <button type="submit">Close Dialog</button> </form>  </dialog> <script> const dialog = document.getElementById('dialog'); const openBtn = document.getElementById('openBtn'); openBtn.addEventListener('click', () => { dialog.showModal(); }); </script></code></pre>

You could close the dialog without JavaScript using <form method="dialog">, but you still needed JavaScript to open it.

The Invoker Commands Approach

With Invoker Commands, you add two attributes to your button:

That’s it. No JavaScript required.

How It Works

The two key attributes are:

commandFor: References the id of the element you want to control
command: Specifies what action to perform

For dialogs, you have two command options:

show-modal: Opens the dialog as a modal (with backdrop, blocking interaction with the rest of the page)
close: Closes the dialog

What You Get for Free

When you use command="show-modal", the browser handles:

Opening the dialog in the top layer (above all other content)
Adding a backdrop that blocks interaction with the page
Moving focus into the dialog
Closing with the Esc key
Managing the accessibility tree

Browser Support

Invoker Commands are now supported across all modern browsers. This is still a rather new addition to the platform so, you will have to determine whether it is safe to use in your production environment. With that said, there is also a polyfill available by Keith Cirkel.

NOTE: The Invoker Commands API is supported by all modern browsers. See the browser compatibility table on MDN Web Docs for details.

Why This Matters

Invoker Commands represent a broader shift: giving HTML the power to handle common interactive patterns without requiring JavaScript. This means:

Faster initial page loads (less JavaScript to parse and execute)
More resilient interfaces (works even if JavaScript fails to load)
Simpler codebases (less glue code to maintain)
Better alignment with the declarative nature of HTML

The web platform keeps getting better at being the web platform.