From Facebox to a native, accessible dialog

Facebox helped popularize small modal windows on jQuery sites. The lasting idea is useful: show a focused piece of content without losing the current page. The details matter more than the visual resemblance to a particular service.

This updated tutorial uses the native dialog element for a new implementation. It is not a download or endorsement of an unverified historical Facebox build.

Use a modal only when it helps

If the content deserves a bookmarkable page, use a normal link. A modal is better suited to a short confirmation, a compact preview, or a focused task. Do not hide essential navigation or a long article behind a popup.

<button type="button" id="open-preview">Open preview</button>
<dialog id="preview" aria-labelledby="preview-title">
  <h2 id="preview-title">Project preview</h2>
  <p>A short description belongs here.</p>
  <form method="dialog"><button>Close preview</button></form>
</dialog>
<script>
  const dialog = document.querySelector('#preview');
  document.querySelector('#open-preview').addEventListener('click', () => {
    dialog.showModal();
  });
</script>

The dialog reference explains the distinction between show() and showModal(). The latter enters the modal top layer rather than merely displaying the element.

Check focus and dismissal

Give the dialog an accessible name, provide a visible close button, and test Escape. Confirm that focus returns to the invoking control when it closes. Choose initial focus based on the task, especially if an action could discard information.

Keep the original link to a full-size image or document available when building a preview. A failed script should not make the underlying content unreachable. When migrating an older widget, remove its document-level event handlers as well as its markup.