How to create a modal window with HTML and CSS? (UI Design)

A modal window is essentially an ordinary

implemented through CSS and JavaScript, not a special HTML element; it uses z-index layering, backdrop masks and aria attributes (such as aria-hidden, role="dialog") to achieve accessible interaction blocking effects.

What a modal window actually is in HTML

A modal window isn't a special HTML element — it's just a <div> (or similar container) that's visually layered on top of the page, with interaction blocked behind it. Browsers don't enforce modality; you create it using CSS positioning, stacking context ( <code>z-index ), and focus/keyboard behavior.

Basic HTML structure for accessibility and control

Start with a wrapper that's hidden by default, includes a backdrop and content area, and uses semantic attributes:

 <div id="my-modal" class="modal" aria-hidden="true" role="dialog" aria-labelledby="modal-title">
  <div class="modal-backdrop"></div>
  <div class="modal-content" role="document">
    <h2 id="modal-title">Confirmation</h2>
    <p> Are you sure you want to delete this item?</p>
    <button id="confirm-btn"> Yes</button>
    <button id="cancel-btn"> No </button>
  </div>
</div>

• aria-hidden="true" hides the modal from screen readers until opened
• role="dialog" tells assistive tech it's a modal interaction
• aria-labelledby links to the visible heading for context
• Always include both backdrop and content as separate elements — makes styling and click-outside logic cleaner

CSS needed to make it look and behave like a modal

The key is combining position: fixed , proper z-index , and transitions — plus blocking background interaction:

 .modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
<p>.modal[aria-hidden="false"] {
opacity: 1;
pointer-events: all;
}</p><p> .modal-backdrop {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
}</p><p> .modal-content {
background: white;
padding: 1.5rem;
border-radius: 6px;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
max-width: 90%;
max-height: 80vh;
overflow-y: auto;
position: relative;
z-index: 1001;
}</p>

• Don't forget pointer-events: none on the outer .modal when closed — prevents accidental clicks through invisible layers
• z-index must be higher than everything else (eg, navbars, headers), but the backdrop and content need different values ​​so content sits above backdrop
• Use max-height overflow-y: auto on .modal-content — modals with long text will otherwise overflow the viewport
• Avoid display: none for hiding — it breaks focus management and transitions

JavaScript to toggle and trap focus (minimal but necessary)

Without JS, the modal stays static. You need at minimum: open/close toggling and basic keyboard navigation:

 const modal = document.getElementById('my-modal');
const openBtn = document.getElementById('open-btn');
const closeBtns = document.querySelectorAll('#confirm-btn, #cancel-btn, .modal-backdrop');
<p>function openModal() {
modal.setAttribute('aria-hidden', 'false');
modal.querySelector('.modal-content').focus();
}</p><p> function closeModal() {
modal.setAttribute('aria-hidden', 'true');
openBtn.focus();
}</p><p> openBtn.addEventListener('click', openModal);
closeBtns.forEach(btn =&gt; btn.addEventListener('click', closeModal));</p><p> // Trap tab focus inside modal when open
modal.addEventListener('keydown', (e) =&gt; {
if (e.key !== 'Tab') return;
const focusable = modal.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
const first = focusable[0];
const last = focusable[focusable.length - 1];</p><p> if (e.shiftKey &amp;&amp; document.activeElement === first) {
e.preventDefault();
last.focus();
} else if (!e.shiftKey &amp;&amp; document.activeElement === last) {
e.preventDefault();
first.focus();
}
});</p>

• Setting aria-hidden="false" triggers the CSS transition — no need for extra classes
• Always move focus into the modal on open ( .focus() on first focusable or content wrapper)
• Focus trapping is non-negotiable for WCAG — users shouldn't tab out into background content
• Don't rely only on clicking the backdrop to close — add Escape key support too (just add if (e.key === 'Escape') closeModal(); in the keydown handler)

The hardest part isn't showing the box — it's keeping focus locked, managing screen reader announcements, and handling resize or dynamic content without breaking layout. Most real-world bugs come from forgetting aria-hidden sync or skipping focus trapping.