[whatwg] More feedback relating to <dialog> and modal section

Ian Hickson ian at hixie.ch
Mon Apr 30 20:43:18 PDT 2012

On Thu, 29 Jul 2010, Ojan Vafai wrote (to www-dom):
> Use-case: Building modal DOM-based elements (e.g. modal dialogs) is very 
> difficult right now. You need to capture and handle all sorts of events 
> to cancel (e.g. tab, mouse events, etc).

I've addressed this by introducing an "inert" attribute that you can use 
to indicate that a subtree of the document is inert. This effectively 
means that the parts of the document not so marked are modal.

> Instead, focusin/focusout should be cancelable. If either event is 
> cancelled, it should cancel the focus change within the page. The UA is 
> free, however, to blur the top-level window and, for example, focus the 
> address bar. This allows sites to provide a modal experience in a 
> reliable way, without a lot of code, but still disallows a web page from 
> trapping keyboard focus.

It's more than just focus, though. For example you want to disable buttons 
that respond to clicks, you want to stop it responding to drag-and-drop, 
you probably even want the browser's find-in-page to (by default anyway) 
avoid finding things in that area, etc.

On Thu, 26 Aug 2010, E.J. Zufelt wrote:
> I am wondering if public discussion has been had over the concept of 
> introducing a "dialog" element into html5.

There is now such an element!

> Normally a modal dialog is created using scripting and CSS to restrict 
> focus and activity within the "modal" segment of the DOM and to style 
> the modal section of the DOM to appear as though it is a separate region 
> floating above the remainder of the document.
> A modal element type could indicate to UAs that a segment of the DOM is 
> to be treated as active, while the remainder of the DOM is to be 
> inactive.  Focus could be automatically set to the first natively 
> focusable element within the modal segment of the DOM, or could be 
> explicitly set through scripting.  UAs could provide a default style for 
> modals, as they do for other elements, but the developer would normally 
> need to adjust the style using CSS for proper sizing and positioning.

That's more or less how the new element works.

Ian Hickson               U+1047E                )\._.,--....,'``.    fL
http://ln.hixie.ch/       U+263A                /,   _.. \   _\  ;`._ ,.
Things that are impossible just take longer.   `._.-(,_..'--(,_..'`-.;.'

More information about the whatwg mailing list