Skip to content

Commit

Permalink
Modernize and correct <dialog> show() and showModal()
Browse files Browse the repository at this point in the history
  • Loading branch information
@annevk
annevk committed Mar 19, 2023
1 parent 3c1c254 commit aed86a0
Showing 1 changed file with 23 additions and 34 deletions.
57 changes: 23 additions & 34 deletions source
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59893,27 +59893,23 @@ interface <dfn interface>HTMLDialogElement</dfn> : <span>HTMLElement</span> {

<dl class="domintro">
<dt><code data-x=""><var>dialog</var>.<span subdfn data-x="dom-dialog-show">show</span>()</code></dt>

<dd><p>Displays the <code>dialog</code> element.</p></dd>

<dt><code data-x=""><var>dialog</var>.<span subdfn data-x="dom-dialog-showModal">showModal</span>()</code></dt>

<dd>
<p>Displays the <code>dialog</code> element and makes it the top-most modal dialog.</p>

<p>This method honors the <code data-x="attr-fe-autofocus">autofocus</code> attribute.</p>
</dd>

<dt><code data-x=""><var>dialog</var>.<span subdfn data-x="dom-dialog-close">close</span>([ <var>result</var> ])</code></dt>

<dd>
<p>Closes the <code>dialog</code> element.</p>

<p>The argument, if provided, provides a return value.</p>
</dd>

<dt><code data-x=""><var>dialog</var>.<span subdfn data-x="dom-dialog-returnValue">returnValue</span> [ = <var>result</var> ]</code></dt>

<dd>
<p>Returns the <code>dialog</code>'s return value.</p>

Expand All @@ -59924,53 +59920,48 @@ interface <dfn interface>HTMLDialogElement</dfn> : <span>HTMLElement</span> {

<div w-nodev>

<p>When the <dfn method for="HTMLDialogElement"><code data-x="dom-dialog-show">show()</code></dfn>
method is invoked, the user agent must run the following steps:</p>
<p>The <dfn method for="HTMLDialogElement"><code data-x="dom-dialog-show">show()</code></dfn>
method steps are:</p>

<ol>
<li><p>If the element already has an <code data-x="attr-dialog-open">open</code> attribute, then
<li><p>If <span>this</span> has an <code data-x="attr-dialog-open">open</code> attribute, then
return.</p></li>

<li><p>If <var>subject</var> is in the <span data-x="popover-showing-state">popover showing
<li><p>If <span>this</span> is in the <span data-x="popover-showing-state">popover showing
state</span>, then throw an <span>"<code>InvalidStateError</code>"</span>
<code>DOMException</code>.</p></li>

<li><p>Add an <code data-x="attr-dialog-open">open</code> attribute to the <code>dialog</code>
element, whose value is the empty string.</p></li>
<li><p>Add an <code data-x="attr-dialog-open">open</code> attribute to <span>this</span>, whose
value is the empty string.</p></li>

<li><p>Set the <code>dialog</code> element's <span>previously focused element</span> to the
<li><p>Set <span>this</span>'s <span>previously focused element</span> to the
<span>focused</span> element.</p></li>

<li><p>Run the <span>dialog focusing steps</span> given the <code>dialog</code> element and
false.</p></li>
<li><p>Run the <span>dialog focusing steps</span> given <span>this</span> and false.</p></li>
</ol>

<p>When the <dfn method for="HTMLDialogElement"><code
data-x="dom-dialog-showModal">showModal()</code></dfn> method is invoked, the user agent must run
the following steps:</p>
<p>The <dfn method for="HTMLDialogElement"><code
data-x="dom-dialog-showModal">showModal()</code></dfn> method steps are:</p>

<ol>
<li><p>Let <var>subject</var> be the <code>dialog</code> element on which the method was
invoked.</p></li>

<li><p>If <var>subject</var> already has an <code data-x="attr-dialog-open">open</code>
attribute, then throw an <span>"<code>InvalidStateError</code>"</span> <code>DOMException</code>.</p></li>
<li><p>If <span>this</span> has an <code data-x="attr-dialog-open">open</code> attribute, then
throw an <span>"<code>InvalidStateError</code>"</span> <code>DOMException</code>.</p></li>

<li><p>If <var>subject</var> is not <span>connected</span>, then throw an
<li><p>If <span>this</span> is not <span>connected</span>, then throw an
<span>"<code>InvalidStateError</code>"</span> <code>DOMException</code>.</p></li>

<li><p>If <var>subject</var> is in the <span data-x="popover-showing-state">popover showing
<li><p>If <span>this</span> is in the <span data-x="popover-showing-state">popover showing
state</span>, then throw an <span>"<code>InvalidStateError</code>"</span>
<code>DOMException</code>.</p></li>

<li><p>Add an <code data-x="attr-dialog-open">open</code> attribute to <var>subject</var>, whose
<li><p>Add an <code data-x="attr-dialog-open">open</code> attribute to <span>this</span>, whose
value is the empty string.</p></li>

<li><p>Set the <span>is modal</span> flag of <var>subject</var> to true.</p></li>
<li><p>Set the <span>is modal</span> flag of <span>this</span> to true.</p></li>

<li>
<p>Let <var>subject</var>'s <span>node document</span> be <span data-x="blocked by a
modal dialog">blocked by the modal dialog</span> <var>subject</var>.</p>
<p>Let <span>this</span>'s <span>node document</span> be <span data-x="blocked by a modal
dialog">blocked by the modal dialog</span> <span>this</span>.</p>

<p class="note" id="note-dialog-plus-focus-fixup">This will cause the <span>focused area of the
document</span> to become <span>inert</span> (unless that currently focused area is a
Expand All @@ -59980,15 +59971,15 @@ interface <dfn interface>HTMLDialogElement</dfn> : <span>HTMLElement</span> {
focus.</p>
</li>

<li><p>If <var>subject</var>'s <span>node document</span>'s <span>top layer</span> does not
already <span data-x="list contains">contain</span> <var>subject</var>, then <span
data-x="top-layer-add">add</span> <var>subject</var> to <var>subject</var>'s <span>node
<li><p>If <span>this</span>'s <span>node document</span>'s <span>top layer</span> does not
already <span data-x="list contains">contain</span> <span>this</span>, then <span
data-x="top-layer-add">add</span> <span>this</span> to <span>this</span>'s <span>node
document</span>'s <span>top layer</span>.</p></li>

<li><p>Set the <var>subject</var>'s <span>previously focused element</span> to the
<li><p>Set <span>this</span>'s <span>previously focused element</span> to the
<span>focused</span> element.</p></li>

<li><p>Run the <span>dialog focusing steps</span> given <var>subject</var> and true.</p></li>
<li><p>Run the <span>dialog focusing steps</span> given <span>this</span> and true.</p></li>
</ol>

<p>The <dfn>dialog focusing steps</dfn>, given a <code>dialog</code> element <var>subject</var>
Expand Down Expand Up @@ -60170,7 +60161,6 @@ interface <dfn interface>HTMLDialogElement</dfn> : <span>HTMLElement</span> {
</div>

<div class="example">

<p>This dialog box has some small print. The <code>strong</code> element is used to draw the
user's attention to the more important part.</p>

Expand All @@ -60182,7 +60172,6 @@ interface <dfn interface>HTMLDialogElement</dfn> : <span>HTMLElement</span> {
&lt;p>&lt;label>&lt;input name=round type=checkbox> Only add perfectly round coins&lt;/label>&lt;/p>
&lt;p>&lt;input type=button onclick="submit()" value="Add Coins">&lt;/p>
&lt;/dialog></code></pre>

</div>


Expand Down

0 comments on commit aed86a0

Please sign in to comment.