This is an archived snapshot of W3C's public bugzilla bug tracker, decommissioned in April 2019. Please see the home page for more details.
Currently a modal dialog makes every node in its document except for the dialog's ancestors and descendants inert. That means it's possible for a dialog's ancestors to originate events. As a web developer it doesn't make sense to, for example, be able to click on a modal dialog's ancestor node. It seems to me that a modal dialog should be defined such that: * Every node in a modal dialog's document except for its ancestors and descendants do not participate in events. * A modal dialog's ancestors should be able to receive events via event bubbling/capturing, but cannot be an event target. * A modal dialog's descendants participate in events as normal.
Any node, even an inert node, can be an event target. All it does, basically, is prevent clicks and doesn't let you focus the element. What ancestors are you imagining a <dialog> having where it would be bad if they could be clicked or focused?
Can an inert node be an event.target? I thought an inert node behaves as if it's missing and therefore can't be an event.target. I think in all cases it would be bad to be able to click on a modal dialog's ancestor. For example, below it doesn't make sense if you can click on #div1 when the modal dialog is open. <body> <div id="div1" style="position:absolute;top:0;left:0;width:100px;height:100px;"> <dialog></dialog> </div> </body>
Example where you can select text behind a modal dialog: http://jsbin.com/evafib/1/edit Example where you can toggle a modal dialog by clicking on the parent: http://jsbin.com/eqidoc/1/edit
I'm still undecided about the ideal behavior, but want to point out two use cases for clicking outside the dialog: 1. Clicking outside to dismiss the dialog. For example, go to https://twitter.com/WHATWG while not logged in and try to Retweet something. Clicking outside the resulting dialog dismisses it. 2. Clicking outside shakes the dialog. For example, in Chrome, go to chrome://settings/fonts and click outside the dialog. It's possible ::backdrop meets these use cases (see bug 22569). (In reply to comment #3) > Example where you can select text behind a modal dialog: > http://jsbin.com/evafib/1/edit This is an implementation bug: http://crbug.com/252071 Although the spec just says the user agent may prevent the user from selecting text.
(In reply to comment #3) > Example where you can select text behind a modal dialog: > http://jsbin.com/evafib/1/edit The Text nodes here are inert, so you shouldn't be able to select them. It's onl the <body> that's not inert. > Example where you can toggle a modal dialog by clicking on the parent: > http://jsbin.com/eqidoc/1/edit Use a <button> for a button, not a <div>. (In reply to comment #2) > Can an inert node be an event.target? Yes. What did you read that made you think otherwise? The problem with making the ancestors inert is that "inert" is defined to operate on entire subtrees, so if the ancestor was inert, the <dialog> would be too.