HTML5 요소로 액세스 가능한 팝업 네이티브 구축

Many developers still rely on heavy, third-party JavaScript frameworks or external UI libraries just to create simple popups and modal windows. This introduces bloated bundle sizes, slows down page speed, and often ruins accessibility (a11y) for keyboard users and screen readers.

Fortunately, you can build an accessible, highly interactive modal window completely natively using the modern HTML5 <dialog> element.

The Code Setup

Here is how simple it is to build a native modal with semantic HTML, minimal JavaScript, and a touch of modern CSS styling.

1. The Markup (index.html)

<main>
  <h1>Native HTML5 Dialog Element</h1>
  <p>Click the button below to open a completely native, accessible popup modal.</p>
  <button id="openModalBtn">Open Modal Window</button>
</main>

<dialog id="myModal">
  <h2>Native Modal Title</h2>
  <p>This modal is rendered natively by the browser. Focus is trapped automatically!</p>
  <button id="closeModalBtn">Close Modal</button>
</dialog>

### 2. The Logic (script.js)
Instead of manually managing visibility states or toggle classes, the browser gives us built-in `.showModal()` and `.close()` methods:

Enter fullscreen mode Exit fullscreen mode

javascript
const modal = document.getElementById(‘myModal’);
const openBtn = document.getElementById(‘openModalBtn’);
const closeBtn = document.getElementById(‘closeModalBtn’);
openBtn.addEventListener(‘click’, () => {
modal.showModal();
});
closeBtn.addEventListener(‘click’, () => {
modal.close();
});

css
dialog::backdrop {
  background-color: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px); 
}

dialog {
  border: none;
  border-radius: 8px;
  padding: 2rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

Enter fullscreen mode Exit fullscreen mode