Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

editorial: move dialog examples to preamble #10964

Merged
merged 1 commit into from
Jan 31, 2025
Merged

editorial: move dialog examples to preamble #10964

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 14 additions & 14 deletions source
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61735,6 +61735,20 @@ interface <dfn interface>HTMLDialogElement</dfn> : <span>HTMLElement</span> {
caused focus to jump to the Agree <code>button</code>, which is a bad user experience.</p>
</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>

<pre><code class="html">&lt;dialog>
&lt;h1>Add to Wallet&lt;/h1>
&lt;p>&lt;strong>&lt;label for=amt>How many gold coins do you want to add to your wallet?&lt;/label>&lt;/strong>&lt;/p>
&lt;p>&lt;input id=amt name=amt type=number min=0 step=0.01 value=100>&lt;/p>
&lt;p>&lt;small>You add coins at your own risk.&lt;/small>&lt;/p>
&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>

<p>The <dfn element-attr for="dialog"><code data-x="attr-dialog-open">open</code></dfn> attribute
is a <span>boolean attribute</span>. When specified, it indicates that the <code>dialog</code>
element is active and that the user can interact with it.</p>
Expand Down Expand Up @@ -62354,20 +62368,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>

<pre><code class="html">&lt;dialog>
&lt;h1>Add to Wallet&lt;/h1>
&lt;p>&lt;strong>&lt;label for=amt>How many gold coins do you want to add to your wallet?&lt;/label>&lt;/strong>&lt;/p>
&lt;p>&lt;input id=amt name=amt type=number min=0 step=0.01 value=100>&lt;/p>
&lt;p>&lt;small>You add coins at your own risk.&lt;/small>&lt;/p>
&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>

<h4><dfn>Dialog light dismiss</dfn></h4>

<p class="note">"Light dismiss" means that clicking outside of a <code>dialog</code> element whose <code
Expand Down