This chapter introduces modal overlays and the Invoker Commands API as a chance to create show/hide functionality using just HTML/CSS (ie. before we learn about adding behaviours to thing with JavaScript). It’s a bit of a tangent from the last chapter, but is reconnected to themes in that chapter regarding positioning.

Treat this chapter’s content as an optional extension.

</aside>

Modals using `<dialog>`

The <dialog> element is a native popup (or a ‘modal’ dialog) that allows us to create a floating/overlaid interrupting sub-window directly inside our HTML. (Before this element came about, this typically required a lot of custom CSS/JS — but the <dialog> element solves several of these hurdles by bringing modal functionality natively into the browser.)

When <dialog> is opened as a modal, it displays above all other elements. (This is referred to as displaying in the “top layer”). It also comes with a pseudo-element (::backdrop) specifically intended to be designed to darken/blur the rest of the page behind the dialog.

Modal Definition

The ‘modal’ part of a “modal overlay” has a specific meaning. ‘Modal’ means that while the overlay is being shown, the rest of the page is rendered non-interactive until the modal is actioned in some way (for example a choice is made, or the user hits escape or clicks a button to close it).

There are non-modal overlays (called ‘popovers’) that we’ll discuss in future.

</aside>

Opening and closing modal windows can be done with some JavaScript methods — calling .showModal()/.show()/.hide()on a <dialog> DOM element — but since we’ve not learned that yet (what the heck is a DOM anyway?), let’s first see how modals can be invoked (ie. ‘called up’) using something called Invoker Commands.

</aside>

Invoker Commands

Invoker commands allow us to use the commandfor and command attributes on <button> elements to show/overlay/hide modal dialog elements based on their id.

Let’s see how to do this.

Making a modal `<dialog>` element.

First of all, let’s make a modal dialog element.

<dialog id="jfk-excerpt">
	<blockquote>
		<p>"All this will not be finished in the first one hundred days. Nor will it be finished in the first one thousand days, nor in the life of this Administration, nor even perhaps in our lifetime on this planet. But let us begin." In closing, he expanded on his desire for greater internationalism: "Finally, whether you are citizens of America or citizens of the world, ask of us here the same high standards of strength and sacrifice which we ask of you."</p>
		<footer>— John F. Kennedy, <cite>Inaugural Address</cite> (January 20, 1961)</footer>
	</blockquote>
</dialog>

What’s it look like? Here’s the result:

https://codepen.io/editor/alexmesker/pen/019ff2ea-21ff-74a1-a706-a2e72a328cf0

Er… I don’t see anything.

</aside>

Oh yes. By default, a <dialog> is hidden unless it includes the open attribute. See note below.

Modals using <dialog>

Modal Definition

Invoker Commands

Making a modal <dialog> element.

Modals using `<dialog>`

Making a modal `<dialog>` element.