Opening and Closing Dialogs Without JavaScript Using HTML Invoker Commands

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:

<button type="button" id="openBtn">Open Dialog</button>
<dialog id="dialog">
  <form method="dialog">
    <button type="submit">Close Dialog</button>
  </form>
  <!-- dialog content -->
</dialog>

<script>
  const dialog = document.getElementById('dialog');
  const openBtn = document.getElementById('openBtn');
  
  openBtn.addEventListener('click', () => {
    dialog.showModal();
  });
</script>

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:

<button commandFor="dialog" command="show-modal" type="button">
  Open Dialog
</button>

<dialog id="dialog">
  <button commandFor="dialog" command="close" type="button">
    Close Dialog
  </button>
  <!-- dialog content -->
</dialog>

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.