How to Build a Modal/Dialog in an Interview

How to Build a Modal/Dialog in an Interview

The modal/dialog is a common machine coding question. Here is how to build it with focus trap, escape key, and accessibility.

Requirements

• Open/close the modal.
• Overlay click to close.
• Escape key to close.
• Focus trap (tab stays inside the modal).
• Scroll lock on the body.
• Smooth open/close animation.

Plan (5-10 minutes)

1. HTML: overlay + modal container + content + close button.
2. State: open/closed.
3. Events: click overlay, escape key, focus trap.
4. CSS: fixed positioning, overlay, transition.

Build Core (40 minutes)

HTML

<div class="modal-overlay" id="overlay">
  <div class="modal" id="modal">
    <button class="modal-close" onclick="closeModal()">&times;</button>
    <h2>Modal Title</h2>
    <p>Modal content goes here.</p>
    <button>Focusable Button</button>
  </div>
</div>
<button onclick="openModal()">Open Modal</button>

JavaScript

const overlay = document.getElementById("overlay");
const modal = document.getElementById("modal");
let lastFocused = null;

function openModal() {
  lastFocused = document.activeElement;
  overlay.classList.add("active");
  document.body.style.overflow = "hidden";
  modal.querySelector("button").focus();
  document.addEventListener("keydown", handleKeyDown);
}

function closeModal() {
  overlay.classList.remove("active");
  document.body.style.overflow = "";
  if (lastFocused) lastFocused.focus();
  document.removeEventListener("keydown", handleKeyDown);
}

function handleKeyDown(e) {
  if (e.key === "Escape") closeModal();
  if (e.key === "Tab") trapFocus(e);
}

function trapFocus(e) {
  const focusable = modal.querySelectorAll("button, input, a, [tabindex='0']");
  const first = focusable[0];
  const last = focusable[focusable.length - 1];
  if (e.shiftKey && document.activeElement === first) {
    e.preventDefault();
    last.focus();
  } else if (!e.shiftKey && document.activeElement === last) {
    e.preventDefault();
    first.focus();
  }
}

overlay.addEventListener("click", (e) => {
  if (e.target === overlay) closeModal();
});

CSS

.modal-overlay {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0,0,0,0.5); display: none;
  justify-content: center; align-items: center;
}
.modal-overlay.active { display: flex; }
.modal {
  background: white; padding: 24px; border-radius: 8px;
  max-width: 500px; width: 90%; position: relative;
}
.modal-close { position: absolute; top: 8px; right: 12px; font-size: 24px; }

Edge Cases (20 minutes)

• Focus trap (tab and shift+tab).
• Scroll lock (body overflow hidden).
• Restore focus to the trigger on close.
• Animation (fade in/out).
• Multiple modals (stacking).

The Takeaway

Build the modal: HTML (overlay + modal + close button), JavaScript (open/close, overlay click, escape key, focus trap, scroll lock, restore focus), CSS (fixed positioning, overlay, centered). The focus trap and scroll lock show attention to UX and accessibility. These details score higher.