HTML modern native dialog
Since the invention of the first browsers, there has been a requirement for modal windows, dialogs and other floating elements. For about 30 years natively worked only: window.alert(), window.confirm(), window.prompt(). Everything looked like this:
Image from https://developer.mozilla.org/en-US/docs/Web/API/Window/confirm
Somewhere in the 2000th in the era of PrototypeJS and jQuery there were LightBox, DarkBox, ModalBox plus hundreds of bloated, low-performing, inaccessible implementations of dialogs. The same trend of ugly modal windows continued in 2010–2020th in the era of React, Angular and Vue.
Image from https://learnersbucket.com/examples/interview/create-a-lightbox-modal-image-gallery-in-reactjs/
Finally native solution¶
After 30 years browser implemented a new HTML element <dialog> which provides out-of-box API for such cases as dialogs, modal windows, etc.
I created a small demo with native dialog, which includes the most usable pattern for the dialogs. Including backdrop effects, animations, modality, styling, keyboard tricks and focus trap. Everything can be achieved now with a few lines of HTML, CSS and JavaScript. No need for more bloated, ugly 3rd party plugins for this task.
Also worth looking at Popover API which works perfectly in tandem with <dialog>.
References¶
Feedback
For feedback, please check the contacts section. Before writing, please specify where you came from and who you are. Sometimes spammers go insane. Thank you in advance for your understanding.