How to make modals & popups with the HTML <dialog> element

After a long wait, the HTML dialog element is finally supported by both Firefox and Web-kit browsers like Safari.

This means it now has universal coverage across all modern browsers and therefore is suddenly a lot more useful. This includes being potentially valuable in Hype projects as a quick way to build consistent-looking modals and popups.

I’ve created a video that demonstrates how to include this element in a Hype project. This video also describes how incorporating this element simplifies the issues of stacking order, sizing dynamics, background styling, and animation.

You can find this video on my YouTube channel here:

The code example mentioned in this video is:
DialogElement_Comparison.hype.zip (456.4 KB)

8 Likes

Thanks Drew!

Here's some more tips on using modals, easy to implement in Hype: