The dialog element is a very easy way to implement dialogs and modals on your webpage. The previous commonly used method of CSS and dynamically adding/ removing classes had it’s drawbacks; one of them being that the visitor could still interact with elements outside the modal by simply using the tab, spacebar and enter keys.
Web dev simplified made a short intro on Youtube (shown above), but also a more elaborate Blog article.
The official info can be found at the Mozilla developer webpage.