JavaScript: how to handle the dialog element

JavaScript: how to handle the dialog element

In this article we're going to explain the main differences between the two ways of handling a dialog element with JavaScript.

In this article we're going to explain the main differences between the two ways of handling a dialog element with JavaScript.

A dialog element can be handled as a full page modal dialog or as a simple dialog box. With the modal mode, a user cannot interact with the rest of the page, while with the simple dialog mode users can still access other elements on the HTML document.

In the first mode, behind the main dialog box a backdrop overlay will appear, thus preventing any further interaction with the underlying page elements. Instead, when used as a simple dialog box, a dialog element won't show the backdrop.

There are two methods available on a dialog element that control the way it will be presented to the final user:

  1. showModal(): will show the dialog box with the backdrop
  2. show(): will show the dialog box without the backdrop.

In order to close any dialog element shown with one of the two methods described earlier, we need to call the close() method of the related DOM element.

For example:

'use strict';

const openModal = document.querySelector('.open-modal');
const openDialog = document.querySelector('.open-dialog');
const closeModal = document.querySelector('.modal-close');
const modal = document.querySelector('.modal');

const handleOpenModal = () => {
    return modal.showModal(); // With the backdrop
};

const handleOpenDialog = () => {
    return modal.show(); // Without the backdrop
};

const handleCloseModal = () => {
    return modal.close(); // Closes the dialog element
};

document.addEventListener('DOMContentLoaded', () => {
openModal.addEventListener('click', handleOpenModal, false);
        openDialog.addEventListener('click', handleOpenDialog, false);
        closeModal.addEventListener('click', handleCloseModal, false);
    }, false);

The backdrop element is actually handled with the CSS pseudo-element ::backdrop, so that in order to change its styles we need to select it as follows in our CSS code:

.modal::backdrop {
    background-color: rgba(0, 0, 0, 0.8);
}

The dialog element itself has a border and is positioned on one side of the viewport by default, so we need to change its styles as well:

.modal {
    background-color: #fff;
    border: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

With these styles applied, now the dialog box is horizontally and vertically centered within the viewport and no longer shows a border around it. It also features a white background.

The main difference between a custom dialog box when it comes to CSS, is that you can't position the closing control outside of the dialog element (e.g. on the backdrop layer) if such a control is a child of the dialog itself. This happens because of the context created by CSS positioning: once you choose a positioning scheme on a parent element (i.e. dialog), this element will serve as the reference context for all of its positioned descendants.

To solve this issue, you should wrap your dialog element with a full size container in order to place your closing control outside of the dialog element. By doing so, however, you also need to handle the visibility of the container with JavaScript.

Since the dialog element has been designed to fix the accessibility issues created by custom dialog boxes, adding a wrapper element just for the sake of a design choice causes several problems to people who use assistive technologies.

Demo

JavaScript: dialog element