Modern dialog

In 2023, to show modal dialog, you do not need any fancy framework or library, nor do you need to install an ugly NPM package! Everything is already in the HTML5 standard and well supported by browsers. Moreover, you can make beautiful animated dialog with only a single line of JavaScript code: HTMLDialogElement.showModal()

Source

Hello, dialog!

When <dialog> opens, the first element is focused. You can use the autofocus attribute to force focus on any focusable element. There is a great article on MDN about <dialog> element.

Here is a small script to trap focus inside dialog. The script is very simple and doesn't cover edge cases.