Love them or hate them, whether you're displaying an alert, a message, or a newsletter subscription prompt, dialog boxes draw attention to specific content without redirecting users to another page. Historically, dialog boxes relied on a combination of div elements, ARIA attributes, and JavaScript. However, the introduction of the HTML dialog element has made them more accessible and versatile in numerous ways.

So, how can you enhance the design of dialog boxes beyond the standard look provided by frameworks and templates? How can you tailor them to align with a brand's visual identity and contribute to telling its narrative? Here's how I approach it using CSS with ::backdrop, backdrop-filter, and animations.

As mentioned earlier, Emmy-award-winning game composer Mike Worth engaged me to craft a highly graphic design. Mike adores '90s animation, and he challenged me to incorporate its retro aesthetic without creating a cliché. Nevertheless, I had to achieve this retro vibe while ensuring accessibility, performance, responsiveness, and semantic integrity.

A concise review of dialog and ::backdrop

Let's quickly recap.

Note: Although I primarily refer to "dialog boxes" throughout, the HTML element is spelled dialog.

The dialog element is an HTML component designed for implementing modal and non-modal dialog boxes in applications and website interfaces. It comes equipped with built-in features such as closing the box using the Esc key, focus trapping to keep interaction within the box, show and hide methods, and a ::backdrop pseudo-element for styling the overlay of the box.

The HTML structure is straightforward:

<code><dialog><h2>Stay updated</h2>

  Close
</dialog></code>

By default, this type of dialog box is hidden, but adding the open attribute makes it visible upon loading the page:

<code><dialog open=""><h2>Stay updated</h2>

  Close
</dialog></code>

I can't envision many uses for non-modal dialogs that are open by default, so typically, I require a button to open a dialog box:

<code><dialog></dialog>
Stay updated</code>

And a touch of JavaScript to open the modal:

<code>const dialog = document.querySelector("dialog");
const showButton = document.querySelector("dialog + button");
showButton.addEventListener("click", () => {
  dialog.showModal();
});</code>

Closing a dialog box also requires JavaScript:

<code>const closeButton = document.querySelector("dialog button");
closeButton.addEventListener("click", () => {
  dialog.close();
});</code>

If the dialog contains a form with method="dialog," it can close automatically on submission without JavaScript:

<code><dialog>

    Submit

</dialog></code>

The dialog element was created to be accessible right out of the box. It traps focus, supports the Esc key, and behaves like a proper modal. To aid screen readers in announcing dialog boxes correctly, you should include an aria-labelledby attribute. This informs assistive technology where to locate the dialog box's title so it can be read aloud when the modal opens.

<code><dialog aria-labelledby="dialog-title"><h2>Stay updated</h2>

</dialog></code>

Most tutorials I've encountered offer minimal styling for dialog and ::backdrop, which might explain why so many dialog boxes only feature basic border radii and a box-shadow.

I believe every element in a design—regardless of its size or frequency of appearance—is an opportunity to showcase a brand and narrate its offerings or services. I recognize that certain moments during a user's journey through a design can be enhanced by paying extra attention to detail, making their experience more memorable.

Dialog boxes are just one such moment, and Mike Worth's design provides ample chances to reflect his brand or connect directly with someone's position in Mike's story. For instance, styling a newsletter subscription dialog to match the scrolls in his news section.

Alternatively, making the form modal on his error pages resemble a comic-book speech bubble.

dialog in practice

Mike's dropdown navigation menu appears like an ancient stone tablet.

I aimed to extend this look to his dialog boxes with a three-dimensional tablet and a jungle leaf-filled backdrop.

This dialog includes a newsletter subscription form with an email input and a submit button:

<code><dialog><h2>Stay informed</h2>

    <label data-visibility="hidden" for="email">Email address</label>

    Submit

  x
</dialog></code>

I began by setting dimensions for the dialog and adding the SVG stone tablet background image:

<code>dialog {
  width: 420px;
  height: 480px;
  background-color: transparent;
  background-image: url("dialog.svg");
  background-repeat: no-repeat;
  background-size: contain;
}</code>

Next, I applied the leafy green background image to the dialog's generated backdrop using the ::backdrop pseudo-element selector:

<code>dialog::backdrop {
  background-image: url("backdrop.svg");
  background-size: cover;
}</code>

To ensure clarity for anyone completing Mike's form regarding the validity of their email address, I combined :has and :valid CSS pseudo-class selectors to alter the submit button's color from gray to green:

<code>dialog:has(input:valid) button {
  background-color: #7e8943;
  color: #fff;
}</code>

Additionally, I wanted this interaction to reflect Mike's playful nature. Thus, I modified the dialog background image and applied a rubber band animation to the box when a valid email address is entered:

<code>dialog:has(input:valid) {
  background-image: url("dialog-valid.svg");
  animation: rubberBand 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

@keyframes rubberBand {
  from { transform: scale3d(1, 1, 1); }
  30% { transform: scale3d(1.25, 0.75, 1); }
  40% { transform: scale3d(0.75, 1.25, 1); }
  50% { transform: scale3d(1.15, 0.85, 1); }
  65% { transform: scale3d(0.95, 1.05, 1); }
  75% { transform: scale3d(1.05, 0.95, 1); }
  to { transform: scale3d(1, 1, 1); }
}</code>

Tip: Daniel Eden's Animate.css library is an excellent resource for "Just-add-water CSS animations" like the rubber band effect used here.

Modifying how an element appears when it holds a valid input is a fantastic way to introduce interactions that are both enjoyable and beneficial for the user.

This combination of :has and :valid selectors can even extend to the ::backdrop pseudo-class, altering the backdrop's background image:

<code>dialog:has(input:valid)::backdrop {
  background-image: url("backdrop-valid.svg");
}</code>

Give it a try:

Conclusion

We frequently view dialog boxes as functional components, mere interruptions, but nothing more. However, when treated as opportunities for self-expression, even the smallest aspects of a design can influence a product or website's character.

The HTML dialog element, with its inherent behaviors and styling capabilities, presents opportunities for branding and creative storytelling. There's no reason a dialog box can't stand out as much as the rest of your design.

Andy Clarke

Frequently hailed as one of the founders of web design, Andy Clarke has played a pivotal role in advancing web design boundaries and is renowned for his innovative and visually striking designs. His work has motivated countless designers to explore the full potential of product and website design.

Andy has authored several industry-leading books, including 'Transcending CSS,' 'Hardboiled Web Design,' and 'Art Direction for the Web.' He has also collaborated with businesses of all sizes and industries to meet their objectives through design.

Visit Andy's studio, Stuff & Nonsense, and check out his Contract Killer, the popular web design contract template trusted by thousands of web designers and developers.

The above is the detailed content of Getting Creative With HTML Dialog. For more information, please follow other related articles on the PHP Chinese website!