HTML5: Native Dialogue Windows With the New Dialog Element

New HTML5 elements and new JavaScript APIs allow us to create complex applications for the browser. Part of any modern application are one or more dialogue windows. These require users to confirm the execution of certain actions or simply issue a message. With the new „<dialog>“ element we can now markup these windows using pure HTML5.

Simple Markup Without Stylesheets

The „<dialog>“ element can be placed anywhere inside of the HTML body. It's not recommendable to place it inside a text paragraph, though, as it might lead to presentation issues. This is most likely to happen with „<dialog>“ elements that contain further elements and not only text. Defining the property „open“ will show the dialogue window opened. Without that property the window will initially be left closed.

<p>Please read our <span>Terms of Service</span>.</p>
<dialog open>
Terms of Service …
</dialog>
<p>…</p>

In our example we defined a dialogue window between two paragraphs. The special presentation of the element makes sure that it will be shown horizontally centered without taking the flow of the other elements into account and thus overlaying them. Vertically it calculates its position in relation to the upper end of the browser window. If you can go with that default presentation, no further CSS is needed. As with all HTML you are not limited to that. If the standard presentation is not for you, add you own CSS and tweak it to your liking. You are allowed to use any CSS properties for the customization of block elements - most importantly „border-radius“ and „shadow“ for really cool and commonly expected effects.

Controlling the Dialog Using JavaScript

To open and close the „<dialog>“ element use the JavaScript methods „show()“ and „close()“.

document.getElementsByTagName("span")[0].addEventListener("click", function() {
  document.getElementsByTagName("dialog")[0].show();
}, false);

document.getElementsByTagName("dialog")[0].addEventListener("click", function() {
  this.close();
}, false);

In our example we define two events. The first event leads to the opening of the dialog element upon clicking the first „<span>“ element. Clicking the open dialog element will close it again.

Forms Inside Dialog Elements

The „<dialog>“ element is able to contain simple text as well as further elements. That enables us to place e.g. a form inside the dialog. Be aware that instead of the common methods „post“ and „get“ you will want to use the special method „dialog“ to process the form contents.

<dialog>
<p>Our Terms of Service …</p>
<form method="dialog">
<button type="submit" value="yes">Accept</button>
<button type="submit" value="no">Reject</button>
</form>
</dialog>

In this example we created a form with two buttons inside the dialog. Clicking any of the buttons leads to closing the dialog element. No JavaScript is needed here. Would you want to prevent the window from closing on click you'd still need to use JavaScript. Sufficient would be to add a „click“ event to the „<button>“- element which would then prevent the button to act regarding to its defaults per „preventDefault()“.

Reacting on the Closing of Dialogue Windows

The event „close“ allows us to react when a dialogue window gets closed.

document.getElementsByTagName("dialog")[0].addEventListener("close", function(e) {
  var answer = this.returnValue;
}, false);

The property „returnValue“ returns the „value“ - well - value of the button element that was used to close the dialogue. If in our example the „Reject“ button got pressed „returnValue“ would return the value „no“. That gives us a simple way to initiate certain functions in relation to the button pressed.

Creating Modal Dialog Elements

If you want to make sure that no other contents of your HTML can be accessed as long as a dialogue window is open, you will want to use modal dialogue windows. These will be opened exclusively via JavaScript and its method „showModal()“. There is no pure HTML way to achieve this. Modal dialogues will gray out all other content. You are unable to click, edit or select grayed-out contents.

document.getElementsByTagName("dialog")[0].showModal();

Different from default dialog elements the modal variants will not only be centered horizontally but also vertically. If you want to use a different color you can choose to work with the pseudo element „::backdrop“. Make sure to select a color with a low „rgba()“ value to avoid having the content flooded by color and made unreadable or even invisible.

dialog::backdrop {
  background: rgba(255, 0, 255, 0.25);
}

In our example we decided to go with a light yellow. If you want to you can always choose a background image instead of a color. Modal dialogues can always be closed by pressing the ESC key. This makes it necessary to add another event to the dialog. As the „close“ event is only released when the dialog is closed by using a form button, make sure to add the „cancel“ event. This will react as soon as a modal window is closed via ESC.

document.getElementsByTagName("dialog")[0].addEventListener("cancel", function(e) {
  var answer = "cancelled";
}, false);

More Than One Dialog Elements

It is not only theoretically possible to have more than one dialogues open at the same time. Using stylesheets you can even make sure they don't overlap. One exception exist. Modal windows will always lock the other contents and thus don't allow for the usage of more than one at the same time.

Browser Support

Support of the „<dialog>“ element is poor at the time of this writing. Only Chrome and Safari interpret the element correctly. All other browsers see it as a simple block element, which means that they will always show its contents no matter if the property „open“ has been set or not. (dpe)