HTML DOM Dialog 객체는 HTML5
속성
다음은 Dialog 객체의 속성입니다 -
| 속성 | 설명 |
|---|---|
| 열린 | 대화 상자를 열지 여부를 설정하거나 반환합니다. |
| 반환값 | 대화 상자의 반환 값을 설정하거나 반환합니다. |
방법
다음은 Dialog 객체의 메소드입니다 -
| 메서드 | 설명 |
|---|---|
| 닫기() | 대화 상자를 닫습니다. |
| show() | 대화 상자를 표시하려면 |
| showModal() | 가장 많은 대화 상자를 만들어 표시합니다. |
구문
다음은 −
의 구문입니다.대화 개체 만들기 -
var p = document.createElement("DIALOG"); 예시
HTML DOM 대화 상자 개체의 예를 살펴보겠습니다. -
<!DOCTYPE html>
<html>
<head>
<title>DIALOG OBJECT</title>
<style>
dialog{
border:2px solid blue;
font-weight:bold;
}
</style>
</head>
<body>
<p> Clicking on the button below will create a dialog element</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> 출력
이것은 다음과 같은 출력을 생성합니다 -
CREATE 버튼 클릭 시 -
위의 예에서 -
사용자가 클릭할 때 createDialog() 함수를 실행하는 CREATE 버튼을 먼저 만들었습니다.
<button onclick="createDialog()">CREATE</button>
createDialog() 함수는 createElement() 메소드를 사용하여
setAttribute() 메서드를 사용하여 사용자에게 표시할 대화 상자의 열린 속성 값을 설정합니다. 마지막으로 document.body appendChild() 메서드를 사용하고 매개변수로
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);
}