spaceninja + dialog   7

Having an open dialog
To build a native modal dialog you’ll need more than just the <dialog> element. You’ll also need a bit of JavaScript (and if you think that’s odd, you’re not the only one). Such a requirement makes dialogs unique compared to other natively interactive HTML elements (re: some of the more intricate HTML5 form controls or the interactive details and summary elements).
fridayfrontend  cssbasics  html  dialog  modals  accessibility 
march 2019 by spaceninja
The dialog element
Let's talk about pop-ups. And modals, overlays, or anything else you like to call them (remember Lightbox?). Despite user experience concerns, these elements remain popular on the web. But technical implementations can be wildly inconsistent. Looking to stop reinventing the wheel? This post will help guide you in your quest to show content on top of other content.
fridayfrontend  css  cssbasics  html  dialog  modals 
october 2018 by spaceninja
The current state of modal dialog accessibility
Until native dialogs are ubiquitous across all major browsers, we’re going to continue to need ARIA to help us make sure modal dialogs are accessible. But, bear in mind, some ARIA features are also relatively new and also require some time to get full support with both browsers and screen readers. Until either native dialogs or ARIA properties reach full support, it is our responsibility to continue to test not only our modal dialogs, but any component we are building, to ensure it provides (and continues to provide) an accessible user experience.
fridayfrontend  css  dialog  modals  accessibility  aria 
july 2018 by spaceninja
Build Native Modals Using the Dialog Element
Previously, if we wanted to build a modal or a dialog box of any sort, we needed to arrange our markup in a way where we have a backdrop, a close button, keep events trapped within the dialog, find a way to pass message out of the dialog... It was really complicated. The dialog element solves all the problems above and more.
css  cssbasics  javascript  dialog  modals  fridayfrontend 
may 2018 by spaceninja
Native Modals on the Web Using the HTML Dialog Element
The HTML 5.2 spec introduced a dialog element that makes it easy to implement native modals and pop-ups. Modals are an important part of almost any non-trivial web app, so it’s promising to think that there’s finally a way to implement one without re-inventing the wheel each time. You can click the button below for an example modal created using the dialog element:
css  cssbasics  html  dialog  modals  fridayfrontend 
may 2018 by spaceninja
Meet the New Dialog Element
HTML 5.2 has introduced a new <dialog> element for native modal dialog boxes. At first glance, it seems fairly straightforward (and it is), but as I’ve been playing around with it, I’ve found it has some nice features that might be easy to miss.
fridayfrontend  css  html  dialog  modals  javascript 
january 2018 by spaceninja
What’s New in HTML 5.2?
Of all the changes in HTML 5.2, I’m the most excited about the introduction of the <dialog> element, a native dialog box. Dialogs are incredibly prevalent on the web, yet every implementation is different in some way. Dialogs are also really difficult to do in a way that is accessible, resulting in most dialogs on the web being practically unusable for users who don’t navigate the web visually.
html  html5  fridayfrontend  dialog  modals  api  payments  main 
january 2018 by spaceninja

Copy this bookmark: