Poco soporte de momento

	1.	By default, a dialog is centered vertically in the viewport when opened. It is still absolutely positioned so it can be scrolled away. The viewport centering occurs regardless of the dialog’s position in the DOM tree.
	2.	Dialogs can be modal. When a modal dialog is opened, it blocks the rest of the document. There is a “pending dialog” stack to handle the case of multiple modal dialogs.
	3.	A new stacking layer on top of the existing CSS stacking contexts handles “always on top” behavior. Dialog and the Fullscreen spec both use the top layer. Modal dialogs reside in the top layer. So you don’t need to worry about setting a z-index manually to keep your modal on top of other elements on the page.

The dialog element also comes with a pseudo element called ::backdrop, which allows you to style the background behind a modal, thus creating the dimming overlay effect that we created in the previous five techniques, only this time, you can create that overlay easily by styling the pseudo-element which comes by default with the dialog element.
So, to create an overlay effect using the HTML dialog element, you just apply a background color to its associated backdrop pseudo-element and position it to cover the area of the viewport like we did in a previous techniques.

To make working with it even easier, dialog comes with an API which makes showing and hiding a modal a piece of cake, using functions like show() and hide(), among others.
You can learn more about the dialog element and its API and see different live examples in this demo by Eiji Kitamura. The demo runs in a polyfill mode when you’re viewing it in a browser that does not yet support the dialog element.