HTML DOM의 Dialog 객체는 HTML5에서 새롭게 도입된 <dialog> 요소와 연관된 객체입니다. 이 객체를 활용하면 웹 페이지에서 팝업창이나 모달(Modal) 창을 손쉽게 만들 수 있습니다. 다만, 사용자가 대화 상자를 실제로 보고 상호작용하려면 open 속성 값이 반드시 설정되어 있어야 합니다.
Dialog 객체의 주요 속성(Properties)
Dialog 객체에서 제공하는 속성은 다음과 같습니다.
| 속성 | 설명 |
|---|---|
| open | 대화 상자를 열지(open) 닫을지(closed) 여부를 설정하거나 현재 상태를 반환합니다. |
| returnValue | 대화 상자의 반환값(return value)을 설정하거나 반환합니다. |
Dialog 객체의 주요 메서드(Methods)
Dialog 객체에서 제공하는 메서드는 다음과 같습니다.
| 메서드 | 설명 |
|---|---|
| close() | 열려 있는 대화 상자를 닫습니다. |
| show() | 대화 상자를 화면에 표시합니다. |
| showModal() | 대화 상자를 최상위 레이어로 만들어 모달 형태로 표시합니다. |
문법(Syntax)
JavaScript로 대화 상자 객체를 생성하는 기본 문법은 다음과 같습니다.
var p = document.createElement("DIALOG");예제(Example)
HTML DOM Dialog 객체를 활용한 실제 예제를 살펴보겠습니다.
<!DOCTYPE html>
<html>
<head>
<title>DIALOG OBJECT</title>
<style>
dialog{
border:2px solid blue;
font-weight:bold;
}
</style>
</head>
<body>
<p> 아래 버튼을 클릭하면 dialog 요소가 생성됩니다 </p>
<button onclick="createDialog()">CREATE</button>
<script>
function createDialog() {
var dlg = document.createElement("DIALOG");
var dlgTxt = document.createTextNode("DIALOG WINDOW with a button");
var bl=document.createElement("BR");
var btn = document.createElement("BUTTON");
var btnText=document.createTextNode("CLICK HERE");
dlg.setAttribute("open", "open");
dlg.appendChild(dlgTxt);
dlg.appendChild(bl);
btn.appendChild(btnText);
dlg.appendChild(btn);
document.body.appendChild(dlg);
}
</script>
</body>
</html>실행 결과(Output)
위 코드를 실행하면 다음과 같은 화면이 출력됩니다.
CREATE 버튼을 클릭한 후의 결과입니다.
예제 코드 분석
위 예제의 동작 원리를 단계별로 살펴보겠습니다.
1. 버튼 생성 및 이벤트 연결
먼저 사용자가 클릭하면 createDialog() 함수를 실행하는 CREATE 버튼을 만듭니다.
<button onclick="createDialog()">CREATE</button>
2. dialog 요소와 내부 콘텐츠 생성
createDialog() 함수는 createElement() 메서드를 사용해 <dialog> 요소를 동적으로 생성합니다. 이후 createTextNode() 메서드로 대화 상자 안에 표시될 텍스트 노드를 추가하고, 같은 방식으로 <dialog> 요소 내부에 버튼과 버튼 텍스트를 생성합니다.
3. open 속성 설정 및 문서에 추가
setAttribute() 메서드를 통해 대화 상자의 open 속성 값을 설정하여 화면에 표시되도록 합니다. 마지막으로 document.body의 appendChild() 메서드에 <dialog> 요소를 매개변수로 전달하여, 버튼이 포함된 대화 상자 전체를 문서 본문(body)에 추가합니다.
function createDialog() {
var dlg = document.createElement("DIALOG");
var dlgTxt = document.createTextNode("DIALOG WINDOW with a button");
var bl=document.createElement("BR");
var btn = document.createElement("BUTTON");
var btnText=document.createTextNode("CLICK HERE");
dlg.setAttribute("open", "open");
dlg.appendChild(dlgTxt);
dlg.appendChild(bl);
btn.appendChild(btnText);
dlg.appendChild(btn);
document.body.appendChild(dlg);
}이처럼 HTML DOM의 Dialog 객체를 활용하면 별도의 라이브러리 없이 순수 JavaScript만으로 팝업과 모달 창을 구현할 수 있습니다. 특히 showModal() 메서드를 사용하면 배경과 상호작용이 차단되는 진정한 의미의 모달 대화 상자를 간편하게 만들 수 있다는 점이 큰 장점입니다.