<p>Using custom dialog elements instead of native browser implementations, such as <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/alert"><code>alert</code></a>,
<a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/confirm"><code>confirm</code></a>, or <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/prompt"><code>prompt</code></a>,
has become the standard for web development for quite some time (popularized by various <a href="https://jqueryui.com/dialog/">jQuery</a> plugins and by <a href="https://getbootstrap.com/2.3.2/javascript.html#modals">Bootstrap</a> itself), so that with every new UI library that emerges[^1][^2][^3], it is common for its authors to re-implement a modal with the framework of the moment (which may or may not implement <a href="https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/">WAI-ARIA accessibility</a>).</p>
<p>[^1]: <a href="https://mui.com/material-ui/react-modal/">Material UI Modal</a>
[^2]: <a href="https://ant.design/components/modal">Ant Design Modal</a>
[^3]: <a href="https://carbondesignsystem.com/components/modal/usage/#live-demo">Carbon Design System Modal</a></p>
<p>But now, with the arrival of the <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog"><code>&lt;dialog&gt;</code></a> element in HTML5 (supported by <a href="https://caniuse.com/dialog">93.85%</a> of browsers in use), it is much easier to create dialogs natively. In this article, we will see how to create a simple modal (and non-modal) dialog with the <code>&lt;dialog&gt;</code> element.</p>
<h2>Understanding the <em>dialog</em> element</h2>
<p>In the sense employed in user interface development, a <strong>dialog</strong> is a <q>conversation</q> between the system and the user, where the system expects a response from the user to continue. A dialog can be <strong>modal</strong> or <strong>non-modal</strong>. A modal dialog (that is, one that changes the <strong>mode</strong> of interaction of the user with the system) is one that locks the interface, preventing the user from interacting with the rest of the page until it is closed. A non-modal dialog (that is, one that <em>does not</em> change the <strong>mode</strong> of interaction of the user with the system), on the other hand, allows the user to interact with the rest of the page while the dialog is open.</p>
<p>The simplest way to put a non-modal dialog on the screen is as follows:</p>
<pre><code class="highlited-code-wrapper langhtml"><div class="highlited-code" data-language="html">&lt;dialog open&gt;
  &lt;p&gt;Olá, mundo!&lt;/p&gt;
  &lt;form method=&quot;dialog&quot;&gt;
    &lt;button&gt;Fechar&lt;/button&gt;
  &lt;/form&gt;
&lt;/dialog&gt;</div>
</code></pre><p>Note the form, on line 5, with the <em>dialog</em> method. It is this form that sends actions to the <code>dialog</code>. It will be displayed like this:</p>
<CodePen id="zYMgBOz" />

<p>What makes the example above a non-modal dialog is the use of the <code>open</code> attribute (line 1), which also makes it unable to be closed with the <code>Esc</code> key. It&#39;s possible to create a non-modal dialog using the JavaScript API:</p>
<CodePen id="BaGXqjx" />

<p>In order for it to behave like a modal, it is necessary to open it through its JavaScript API, as we will see next.</p>
<CodePen id="VwVojZB" />

<p>This time, we open and close the modal with JavaScript and put the form result in the <code>output</code> element when the modal is closed. Read the code carefully and try to understand what is happening.</p>
<h2>Styling the modal</h2>
<p>The <code>dialog</code> element can (of course), be styled like any other HTML element. However, note that, to style the overlay (the dark background behind the modal), it is necessary to use the <code>::backdrop</code> selector:</p>
<CodePen id="gOQVMYE" />

<h2>Polyfill</h2>
<p>If you want to use <code>dialog</code> and don&#39;t have compatibility issues in older browsers, you can use this <a href="https://github.com/GoogleChrome/dialog-polyfill">polyfill</a>.</p>
<hr />

<h3>References</h3>

<ul>
<li><a href="https://web.dev/learn/html/dialog/">Dialog</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog">Dialog</a></li>
<li><a href="https://www.nngroup.com/articles/modal-nonmodal-dialog/">Modal &amp; Nonmodal Dialogs: When (&amp; When Not) to Use Them</a></li>
</ul>


Creating native modals with the dialog element

<p>YouTube videos (along with all modern video implementations on the web) uses the <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video">HTML5 video element</a>. This new media tag implements the <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement">HTMLMediaElement API</a>, which gives a plenty of media-related methods common to audio and video.</p>
<p>The standard YouTube player just allow us to increase video speed up to 2x, but, if you want to increase it even more? Well, there&#39;s a solution for that: just set the playback rate to whatever number you want!</p>
<p>In order to do that, you need to select the <code>&lt;video&gt;</code> element in the page and change its playback rate to the desired speed:</p>
<pre><code class="highlited-code-wrapper langjs"><div class="highlited-code" data-language="js">document.getElementsByTagName('video')[0].playbackRate = 2.5;</div>
</code></pre><p>It&#39;s a good solution, but not a practical one. Gracefully, there&#39;s a better way to make use of this functionality without having to open the console of your browser.</p>
<h2>JavaScript bookmarklet</h2>
<figure>
<img src="https://dev-to-uploads.s3.amazonaws.com/i/hjvcu6sqxp24u5emozsb.png" alt="Adding the bookmarklet on Firefox" />
  <figcaption>
    Adding the bookmarklet on Firefox
  </figcaption>
</figure>

<p>If you want to have this script always at hand, the best way is to put it inside a JavaScript <a href="https://en.wikipedia.org/wiki/Bookmarklet">bookmarklet</a>. Just create a new bookmark in you favorite browser and add the code below:</p>
<pre><code class="highlited-code-wrapper langjs"><div class="highlited-code" data-language="js">javascript:(function() {
  const rate = prompt('Set the new playback rate', 2.5);
  if (rate != null) {
    const video = document.getElementsByTagName('video')[0];
    video.playbackRate = parseFloat(rate);
  }
})();</div>
</code></pre><p>And here is an screenshot of the bookmarklet working:</p>
<figure>
<img src="https://dev-to-uploads.s3.amazonaws.com/i/erxbc4xcxdk7v0gun8z1.png" alt="Video speed bookmarklet working" />
  <figcaption>
    Changing the speed of an (awesome) <a href="https://www.youtube.com/watch?v=G4MvFT8TGII">YouTube video</a>
  </figcaption>
</figure>

<p>Feel free to contribute with this code in <a href="https://gist.github.com/DouglasdeMoura/052456a93f93d47982ccb5eefc602eb1" target="_blank">my public gist</a>.</p>


Douglas Moura

Douglas Moura

#html

Creating native modals with the dialog element

Increase YouTube video playback rate up to 2x