HTML 5.2 is currently at the ‘Recommendation’ phase with the W3C, which means that slowly each item in the specification is being worked on to bring them to your browser (well the features that the vendors deem are important). One of these is the dialog element. Currently it can only be used in Chrome and Firefox if you set the flag ‘dom.dialog_element.enabled’ in about:config. There is no support in Edge…unless you are using the new Chromium based development version, in which case you are good to go.
What gives, we have had dialogs for a long time now.
Here is an example of a bootstrap styled dialog
There are two types of dialog available, the standard and modal and are called by using dialog.show() and dialog.showModal() respectivlty. The modal variant is guaranteed to be the top most element no matter what z-index other elements have. In this example I use the backdrop suedo class to block out the background, which is just a div containing lorum ipsum text.
But my customers are on Internet Explorer, what about us?
Luckily there is a polyfill available from the Google developer team and can be found at https://github.com/GoogleChrome/dialog-polyfill.
What about the Submit bit?
Simply add a class to the Submit button, assign an event handler that picks it up and then get any form details. Submit them in the usual way either within the Form tag or manually gather the element contents and send via an API if you prefer.