Modal popup done right

Let's review each element starting from the button that opens the modal.

Open Modal Button

<button commandfor="dialog-example" command="show-modal">
    Press to see the modal
</button>

The button has a commandfor attribute set to the ID of the dialog (dialog-example) and a command attribute set to show-modal.

These attributes are the parts of Invoker Commands API that is supported by all modern browsers since December 2025.

Modal Popup

<dialog id="dialog-example" closedby="any">
    <button commandfor="dialog-example" command="close" aria-label="Close modal">
        &#x2715;
    </button>

    <div>
        Nice! This modal is running without a single js line!
    </div>

    <button commandfor="dialog-example" command="close">Ok</button>
</dialog>

The <dialog> element is a native HTML element that represents a dialog box or other interactive component, such as a modal popup. It has an id attribute set to dialog-example, which matches the commandfor attribute of the button that opens it.

The next attribute is closedby="any", which allows the dialog to be closed by clicking outside of it or pressing the Escape key. Here are the possible values for the closedby attribute:

• auto — The dialog can be closed by clicking "Close" button or pressing the Escape key.
• any — Same as auto, plus clicking outside of the dialog will also close it.
• none — The dialog can only be closed by clicking "Close" button.

We also need close buttons inside dialog. These buttons use the same commandfor and command attributes to control the dialog.

Happy coding!