From Scratch Web Games: A Beginners Guide to Game Development using HTML, CSS, and JavaScript

Chapter 5.13: Dialog Concepts

At this point in time, dialog boxes should be something every reader is familiar with. The idea behind them is that you need some information to get from or present to user. Instead of switching to a different screen you instead open a window above the application that the user deals with. Once the user has finished with the dialog box, it disappears. This is useful for small forms and alert messages, so it is a bit surprising that this feature wasn’t officially available until 2022, a decade after HTML5 was released. Before the dialog tag was added, users were restricted to just a few built-in dialog boxes unless they manually created their own.

The three built-in dialog boxes are part of the window element that is built into the browser. In fact, window is the global object so you don’t even need to specify that you want to use the window object as it is at the end of the scope chain. I will use window when using the built in alerts just so it is clear where these methods are coming from. While window is the core object in browsers, if you are running JavaScript as a scripting language in another piece of software (say a game engine or node.js) then this may not be the case.

The basic alert message simply brings up a message that you must click on before continuing. This tends to annoy users so should only be used for serious alerts. Browser makers have noticed that this can be used by miscreants so will tend to limit it’s use to scripts whose origin is the domain where the site is from. It is simple to use as you can see.

The purpose of the confirm dialog box is to make sure that the user really wants to do something. This can also be annoying if used too often so you should only do so when there is potential data-losing or other critical reasons for the confirmation. As with alert, this can’t be called by cross-origin scripts on many browsers. Because there are two different possible results, the confirm method will return true if the user confirms the request by hitting ok and returns false if they cancel the request. The code for using confirmation dialog boxes looks like this:

The final built-in dialog box is used to get the user to enter a line of text. As with the other two build-in dialog boxes, many browsers block it’s use by cross-origin scripts. The text that the user enters is returned to the script so using this is done as follows:

You will notice that all three of the built-in dialog boxes block the user while they appear, with all controls unresponsive until the dialog is answered. This is known as a modal dialog box. Another type of dialog box that you may encounter is one that appears but let you do other things while you are working with it. The term for this type of dialog box is modeless.

If we wanted to create our own dialog box before 2022, we could do so by simply having a form on our page (technically, we just need the form controls so the form tag is optional). We can do so by creating a form and having it initially invisible. When activated the form is made visible and when done, the form is hidden again as can be seen by the following code.

And inside a script element you would have:

Another way this can be done is we can reserve a div field and create the form when it is needed, then have the close method remove the html. The advantage of this approach is no space is taken on the page for the hidden component.

We can also have the form appear over the page by taking advantage of CSS layout features, which will be discussed in the next chapter.

The above dialog would be modeless, meaning that the user would still be able to do stuff on the page while the dialog was visible. If you wanted a modal dialog, you would have a bit more work involved as you would need to disable all the other components on the page. Some libraries have functions that will do this for you, and you could take advantage of some advanced document methods such as getElementByClassName and getElementsByTagName to loop through all of the elements, which is something we will discuss when we get into Arrays in Chapter 7. Here is our demo code with additional functionality to support modal dialogs but it is clearly a lot more work.

If only there was some type of dialog tag that would easily let us create modal and modeless dialog boxes. In 2022 the <dialog> tag was introduced, which we will be exploring next.