HTML dialog 생성기는 자바스크립트 라이브러리 대신 내장 <dialog> 요소로 모달 창 마크업을 써 줍니다. 유형(일반 모달, 버튼 둘인 확인 다이얼로그, 경고), id, 제목, 본문, 버튼 이름을 고르면 트리거 버튼, 제목과 버튼이 있는 <dialog>, 짧은 스크립트, 원하면 CSS까지 돌려줍니다. 같은 코드가 아래 실시간 미리보기에서 동작하므로 실제 dialog를 열어 볼 수 있습니다.

네이티브 요소가 어려운 부분을 대신 처리합니다. showModal()로 열면 브라우저가 dialog를 페이지 위의 최상위 레이어에 올리고, 나머지 페이지를 비활성화해 키보드와 스크린 리더 사용자가 닿지 못하게 하며, 포커스를 dialog 안으로 옮기고, Esc로 닫고, 닫히면 포커스를 트리거로 돌려줍니다. 옵션으로 show()를 써서 비모달로 열고, 배경 클릭으로 닫고, 모서리 닫기 버튼을 달고, 동작 줄이기 설정을 존중하는 CSS로 페이드 인시킬 수 있습니다.

출력은 순수 HTML, 범위가 한정된 인라인 스크립트 하나, 선택 CSS입니다. 스크립트가 블록 안에 있어 생성한 dialog 여러 개를 한 페이지에 붙여 넣을 수 있습니다. 모든 생성은 브라우저 안에서 이루어집니다.

사용 방법

유형과 id 정하기
모달, 확인, 경고 중에서 고르고 영문자로 시작해 영문, 숫자, 하이픈, 밑줄을 쓰는 id를 64자까지 입력합니다. 이 id가 dialog 이름이 되고 버튼·제목 id의 접두사가 됩니다.
제목과 본문 쓰기
제목(80자까지)은 dialog에 이름을 붙이는 <h2>가 되고, 본문(400자까지, 빈 줄은 새 문단)은 그 아래 텍스트가 됩니다.
버튼 이름 정하기
dialog를 여는 버튼과 닫는 버튼의 이름을 각각 60자까지 입력합니다. 확인 다이얼로그에는 확인 버튼의 이름도 필요합니다.
동작 고르기
비모달 열기, 배경 클릭으로 닫기, 모서리 닫기 버튼, 페이드 인 애니메이션, CSS 포함을 켜고 끕니다. 실시간 미리보기를 열어 Esc를 눌러 동작을 확인해 보세요.
코드 복사
HTML, CSS, JavaScript를 따로 복사하거나 전체 페이지를 복사합니다. 색과 여백은 CSS에서 사이트에 맞게 조정하세요.

작동 원리

생성된 마크업의 구조

트리거는 aria-haspopup="dialog"와 id open-<id>를 가진 <button type="button">입니다. dialog는 <h2>를 가리키는 aria-labelledby를 가지므로 제목이 접근 가능한 이름이 됩니다. 안에는 <form method="dialog">가 있어서 이 방식의 폼을 제출하면 스크립트 없이도 dialog가 닫힙니다. 그래서 닫기 버튼은 평범한 type="submit" 버튼입니다.

스크립트는 id로 dialog를 찾아 트리거를 클릭하면 dialog.showModal()을 호출합니다. 이 패턴에 필요한 자바스크립트는 이 호출 하나뿐이며, 스크립트를 블록으로 감싸 const dialog가 그 안에서만 유효합니다.

<button type="button" id="open-settings-dialog" aria-haspopup="dialog">Open settings</button>

<dialog id="settings-dialog" aria-labelledby="settings-dialog-title">
  <form method="dialog">
    <div class="dialog-panel">
      <h2 id="settings-dialog-title">Settings</h2>
      <p>Choose your preferences.</p>
      <div class="dialog-actions">
        <button type="submit" value="close">Close</button>
      </div>
    </div>
  </form>
</dialog>

<script>
{
  const dialog = document.getElementById("settings-dialog");
  document.getElementById("open-settings-dialog").addEventListener("click", () => dialog.showModal());
}
</script>

show()와 showModal()의 차이

showModal()은 모달 dialog를 엽니다. 최상위 레이어, 비활성 배경, 내장 ::backdrop, Esc로 닫기, 포커스 처리가 모두 포함됩니다. show()나 open 속성은 비모달 dialog를 만드는데, 이는 그런 동작이 전혀 없이 페이지 흐름 안에 나타나는 요소일 뿐입니다. 반드시 응답해야 하는 확인창이나 폼에는 showModal()을 쓰세요.

<dialog> 요소와 메서드는 2022년부터 모든 주요 브라우저에서 쓸 수 있습니다(Safari 15.4와 Firefox 98이 마지막이었습니다). 따라서 최신 브라우저에는 폴리필이 필요 없습니다.

기능	`showModal()`	`show()` / `open` 속성
최상위 레이어와 `::backdrop`	있음	없음
나머지 페이지 비활성	있음	없음
Esc로 닫기	있음	없음
포커스를 dialog 안으로 이동	있음	있음

닫기와 반환값

폼 제출 말고도 dialog.close()를 호출할 수 있습니다. Esc를 누르면 cancel 이벤트가 발생한 뒤 dialog가 닫힙니다. dialog가 닫히면 close 이벤트가 발생하고 dialog.returnValue에 dialog를 닫은 제출 버튼의 value가 들어갑니다. 버튼을 누르지 않고 닫으면 이전 값이 남을 수 있으므로 생성된 확인창 핸들러는 열 때마다 dialog.returnValue를 빈 문자열로 초기화합니다. 동작을 구분하려면 버튼에 value="confirm"처럼 값을 주세요.

실제 예시

설정 dialog

입력

id: settings-dialog
제목: Settings
본문: Choose your preferences.
열기 버튼: Open settings
닫기 버튼: Close

출력

<button type="button" id="open-settings-dialog" aria-haspopup="dialog">Open settings</button>

<dialog id="settings-dialog" aria-labelledby="settings-dialog-title">
  <form method="dialog">
    <div class="dialog-panel">
      <h2 id="settings-dialog-title">Settings</h2>
      <p>Choose your preferences.</p>
      <div class="dialog-actions">
        <button type="submit" value="close">Close</button>
      </div>
    </div>
  </form>
</dialog>

<script>
{
  const dialog = document.getElementById("settings-dialog");
  document.getElementById("open-settings-dialog").addEventListener("click", () => dialog.showModal());
}
</script>

배경 클릭으로 닫히는 확인 다이얼로그

입력

유형: 확인
id: delete-dialog
제목: Delete this project?
본문: This cannot be undone.
열기: Delete project, 닫기: Cancel, 확인: Delete
배경 클릭으로 닫기: 켬

출력

<button type="button" id="open-delete-dialog" aria-haspopup="dialog">Delete project</button>

<dialog id="delete-dialog" aria-labelledby="delete-dialog-title">
  <form method="dialog">
    <div class="dialog-panel">
      <h2 id="delete-dialog-title">Delete this project?</h2>
      <p>This cannot be undone.</p>
      <div class="dialog-actions">
        <button type="submit" value="cancel" autofocus>Cancel</button>
        <button type="submit" value="confirm">Delete</button>
      </div>
    </div>
  </form>
</dialog>

<script>
{
  const dialog = document.getElementById("delete-dialog");
  document.getElementById("open-delete-dialog").addEventListener("click", () => {
    dialog.returnValue = "";
    dialog.showModal();
  });
  dialog.addEventListener("click", (event) => {
    if (event.target === dialog) dialog.close();
  });
  dialog.addEventListener("close", () => {
    if (dialog.returnValue === "confirm") {
      // the user confirmed: run your action here
    }
  });
}
</script>

취소 버튼에 autofocus가 있어 안전한 선택지가 먼저 포커스를 받습니다. 여는 핸들러가 dialog.returnValue를 비운 뒤 close 핸들러가 어느 버튼을 눌렀는지 확인합니다.

특수 문자 이스케이프

입력

id: d1
제목: Tom & "Jerry"
본문: (비움)

출력

<h2 id="d1-title">Tom &amp; &quot;Jerry&quot;</h2>
<div class="dialog-actions">

본문은 비워도 되며, 그러면 문단이 출력되지 않습니다.

사용 가능한 id와 거부되는 id

입력

id: my_dialog
id: my.dialog

출력

my_dialog: 사용 가능
my.dialog: Use a valid dialog id

첫 글자가 영문자이면 이어서 영문, 숫자, 하이픈, 밑줄을 64자까지 쓸 수 있습니다. 점이나 공백은 안 됩니다.

자주 하는 실수

같은 id를 두 번 쓰는 경우
id가 같은 dialog가 한 페이지에 둘이면 버튼과 스크립트가 id로 요소를 찾기 때문에 동작이 깨집니다. 스크립트 자체는 블록으로 감싸져 있으므로 id가 다른 생성물은 한 페이지에 함께 둘 수 있습니다.
배경 클릭으로 기본 닫힘을 기대
네이티브 모달은 Esc와 닫기 버튼으로 닫히며 바깥 클릭으로는 닫히지 않습니다. "배경 클릭으로 닫기"를 켜면 작은 핸들러가 추가되는데, 생성된 CSS가 dialog에 padding: 0을 주고 패딩을 .dialog-panel에 두기 때문에 동작합니다. 그래서 박스 안쪽 클릭은 모두 패널에 닿고, 바깥 클릭만 dialog 자체에 닿습니다. 생성된 CSS를 쓰지 않으면 <dialog>의 브라우저 기본 패딩 때문에 패널 둘레의 여백이 바깥 클릭으로 처리됩니다.
스타일 누락
기본 <dialog>는 모양이 최소한이고 배경은 어두운 오버레이입니다. 패딩, 최대 너비, 색을 직접 지정하고, 애니메이션을 넣는다면 prefers-reduced-motion을 존중하세요.
페이지가 여전히 스크롤됨
모달은 뒤쪽 페이지와의 상호작용을 막지만 브라우저에 따라 배경이 스크롤될 수 있습니다. 중요하다면 열려 있는 동안 body에 overflow: hidden을 적용하세요.
open으로 모달 열기
open 속성을 붙이면 비모달 dialog가 표시됩니다. 모달 동작이 필요하면 항상 showModal()을 호출하세요.

자주 묻는 질문

dialog 요소를 쓰려면 자바스크립트가 필요한가요?

모달을 여는 데는 필요합니다. showModal()이 메서드 호출이기 때문입니다. 닫기는 <form method="dialog">와 제출 버튼으로 스크립트 없이 할 수 있습니다.

네이티브 dialog 요소는 접근성이 좋은가요?

포커스 이동, Esc, 비활성 배경, 트리거로의 포커스 복귀를 처리합니다. 의미 있는 제목과 눈에 보이는 닫기 컨트롤은 여전히 필요하며 생성기가 이를 포함합니다.

어떤 브라우저가 dialog 요소를 지원하나요?

2022년 Safari 15.4와 Firefox 98 이후로 모든 주요 최신 브라우저가 지원합니다. 폴리필 없이 쓸 수 있습니다.

생성된 dialog가 aria-labelledby를 쓰는 이유는요?

눈에 보이는 제목에서 가져온 접근 가능한 이름을 dialog에 주어, 열릴 때 스크린 리더가 제목을 읽게 합니다.

dialog 안에 폼을 넣어도 되나요?

됩니다. 단락을 필드로 바꾸세요. value가 있는 버튼을 쓰면 dialog.returnValue로 어떤 버튼을 눌렀는지 알 수 있습니다.

한 페이지에 dialog를 여러 개 써도 되나요?

됩니다. dialog마다 고유한 id를 주고 생성된 스니펫을 각각 붙여 넣으세요. 스크립트가 블록으로 감싸져 있어 const dialog 선언이 충돌하지 않습니다.

입력한 텍스트가 어딘가로 전송되나요?

아니요. 마크업은 브라우저 안에서 생성되며 텍스트는 HTML 이스케이프됩니다.

마지막 업데이트: 2026년 10월 3일

도구 작업 공간

사용 방법

유형과 id 정하기

제목과 본문 쓰기

버튼 이름 정하기

동작 고르기

코드 복사

작동 원리

생성된 마크업의 구조

show()와 showModal()의 차이

닫기와 반환값

실제 예시

자주 하는 실수

같은 id를 두 번 쓰는 경우

배경 클릭으로 기본 닫힘을 기대

스타일 누락

페이지가 여전히 스크롤됨

open으로 모달 열기

자주 묻는 질문

다음에 쓸 도구