How to create modal and popups using HTML5 dialog
The <dialog> makes it very easy to create popups and modals on a webpage. Bellow I will show how to use dialog element to show alerts on a web page.
If you click "Show Popup" button a most basic dialog will appear, with no custom css just plain html and browser defaults.
See the Pen BMazry by Raj Kiran Singh (@rudrasofttechllp) on CodePen.
showBasicPopup function adds an open attribute to the dialog element which display dialog on the screen. Dialog's position is based on where it's code is placed on screen.
To hide a dialog element you just have to remove the open attribute.
Now lets change the look of this dialog, make it fixed and centered on the page.
See the Pen aXbmzQ by Raj Kiran Singh (@rudrasofttechllp) on CodePen.
Compatibility
As of now all major browsers except IE and Edge support dialog element. To use dialog element on IE or Edge you would have to import a polly fill. Check the pollyfill here dialog-polyfill.