Web API Cookbook

Chapter 13. UI Elements

Introduction

Modern browsers have a few powerful built-in UI elements that you can use in your app. These UI components previously required third-party libraries (or you could build your own).

Dialogs

Pop-up dialogs are a mainstay of many apps, providing feedback and prompting for input. There are countless dialog libraries out there, and it’s possible to build your own. Modern browsers have already done this for you with the <dialog> element. This is a pop-up dialog and includes a backdrop that covers the rest of the page. You can apply styles to both the backdrop and the dialog with a little CSS. By default, the dialog is just a box that pops up with the backdrop behind it. It’s up to you to add a title, buttons, and other content.

Some dialogs contain multiple buttons, and you want to run different code depending on which option they chose. For example, a confirmation modal might have Confirm and Cancel buttons. You’ll need to handle this yourself as well, adding click event listeners to the buttons. In each event listener, you can close the dialog by calling close on it. The close method is a built-in method on the dialog that takes an optional argument that lets you specify a “return value.” This can be checked later from the dialog’s returnValue property. This lets you pass data from the dialog back to the page that opened it.

Details

A <details> element is a component whose content is collapsible. It has some summary content that is displayed ...